Extra Credit Assignment 2 Part 2

by Lucille Kenney

HTML

<div id="myHeading"></div>
<p>We've seen the easy way and it's caviots of modifying the DOM of the page with innerHTML in  Week8, Lesson 3 and how to avoid those perils.</p>
<p>This excercise is to give you a bit more practice creating and inserting DOM elements as objects.</p>

<!-- Div to hold content -->
<div id="myParagraph"></div>

<p>See the javascript comments for further instruction</p>

<p>If you did it right, when you comment out lines 7 and 8 and run the page, nothing will change in the html result frame.</p>

JavaScript

// Create the document elements
var heading = document.createElement("h1");
var paragraph = document.createElement("p");

// Comment lines 8 and 9 out
// InnerHTML is used to add the content to the html page
//heading.innerHTML = "More Practice Creating Dom Elements!";
//paragraph.innerHTML = "The assignment is to convert the innerHTML input to DOM elements as objects.";

// You should create your nodes here;
var hText = document.createTextNode("More Practice Creating Dom Elements!");
var pText = document.createTextNode("The assignment is to convert the innerHTML input to DOM elements as objects.");

// You should add your node to the elements here:
heading.appendChild(hText);
paragraph.appendChild(pText);

// Add them to the html document.
document.getElementById("myHeading").appendChild(heading);
document.getElementById("myParagraph").appendChild(paragraph);