Learning Silverlight 2 Series (20): How to interact with the HTML DOM in Silverlight (bottom)

The support for HTML, client script, and so on is built into Silverlight, and this article is the second part of how to interact with the HTML DOM in Silverlight 2. In the first section, we mainly introduce how to access and modify the existing HTML DOM, we can also completely create a new DOM element or remove an existing DOM element, in addition, we can add event handling for DOM elements.

Creating DOM elements

First, let's look at how to create a new DOM element, the final effect is as follows, when we enter text in a text box, click Create and create an LI element in the area above.

First define the HTML page, even the height of the Silverlight plug-in.

<div id="parentdiv">
　　<ul id="list">
　 　</ul>
</div>
<div　 style="height:200px;">
　　<asp:Silverlight ID="Xaml1" runat="server"
　　 Source="~/ClientBin/TerryLee.SilverlightAccessDom2.xap"
　　 Version="2.0" Width="100%" Height="200px" />
</div>

and define a simple style for the div above to differentiate it from Silverlight

#parentdiv
{
　　background:#FCDFB3;
　　 border:solid 1px #FF9900;
　　width:500px;
　　height:100px;
　　margin-bottom:20px;
}