HTML and CSS Reference
In-Depth Information
EXAMPLE
15.7
4
divObj.appendChild(para);
5
var txt = document.createTextNode("Wow! Hope this works!");
6
para.appendChild(txt);
}
</script>
</head>
<body>
7
<
div id="divtest"
class="divStyle">
<p>Original text in div container.</p>
</div>
</body>
</html>
EXPLANATION
1
After the page has completely loaded this anonymous function will be called.
2
A new paragraph is created with the DOM's
createElement()
method.
3
Now we get a reference to the
div
element defined on line 7.
4
The paragraph is appended to the
div
element with the DOM's
appendChild()
method (see Figure 15.15).
5
The DOM's
createTextNode()
method will return a reference to the text that will be
placed within the new paragraph node.
6
The text created on line 5 is appended to the paragraph.
7
A
div
container is created with an
id
attribute,
divtest
, to be used on line 3 to get a
reference to the
div
element.
Figure 15.15
Creating a new
p
element with the DOM and appending it to a
div
container.
