Interacting With the Browser - kswoll/WootzJs GitHub Wiki

Next let's move beyond writing to the developer console, and start creating HTML elements. In the previous example, you only interacted with types that were provided to you by WootzJs' implementation of mscorlib, which you get automatically by adding the WootzJs targets entry. However, to interact with the browser, you need to add a reference to WootzJs.Web. This involves two steps.

1. Add a reference to WootzJs.Web.dll, found in the WootzJs build folder.

2. Make sure the WootzJs.Web .js file is copied to your project's output folder by adding a line to your Post-build event. Find this line:

    copy c:\dev\WootzJs\build\mscorlib.js $(TargetDir)
   

   And add this line immediately below:

    copy c:\dev\WootzJs\build\WootzJs.Web.js $(TargetDir)
   

Now modify your Program so that your Main method has this line:

Document.Body.AppendChild(Document.CreateTextNode("Hello World"));

Now you'll see the "Hello World" displayed in the browser. We'll finish with a bit of DOM manipulation to surround the "Hello World" with a red box:

var div = Document.CreateElement("div");
div.AppendChild(Document.CreateTextNode("Hello World"));
div.Style.BackgroundColor = "red";
Document.Body.AppendChild(div);