Creating an element and attaching it dynamically to the DOM - creating dynamic html

--><!-- Nothing works without HTML -->


<h1>Creating an element and appending it to the DOM - dynamic html - the principle</h1>

<img src="../images_July_2015/hello.png" width="600" height="287" alt="function php"/>
<h6>CLICK the button below (sneak peek) to peek at the code.</h6>

<div id="topdiv"></div>

var context = document.getElementById("topdiv"); //get hold of an existing div
var div = document.createElement ("div"); //create a new div
var a = document.createElement ("a"); //create a link
a.setAttribute ("href", ""); //set the attribute href for the link
var linktext = document.createTextNode("click to go to primitivecode"); //content to click
a.appendChild(linktext); //text is appended to link
div.appendChild(a); //link is appended to div
div.setAttribute ("style", "background-color:#9C3400; text-align:center;"); //style is added to the div
context.appendChild(div); //div is finally appended to the live document
console.log ("ok"); //error testing in firebug console for firefox
</script> //no Jscript, no loading time


<?php $Weblog->share ();?>



Sneak peek of the server side code