DOM manipulation
Name: William Hundahl
In this lab we'll use JavaScript to access to the DOM and dynamically add element, attribute, and text nodes. After completing each task result will look like the image in _____.
- Copy and paste the contents of the structure, presentation, and behavior txt files into the appropriate web files.
- Use the
getElementById
method to locate element with id equal to fiddle and then assign the returned node object to a new variable nameddivNode
.
- Using the
createElement
method, create a new paragraph (<p>) node and then assign the returned node object to a new variable namedpNode
. - Using the
createTextNode
method, create a new text node with value "CSCI 215: Lab 5 Todo" and then assign the returned node object to a new variable namedpTextNode
. - Using the
appendChild
method, append child nodepTextNode
to parent nodepNode
. - Using the
appendChild
method, append child nodepNode
to parent nodedivNode
.
- Using the
createElement
method, create a new horizontal rule (<hr>) node and then assign the returned node object to a new variable namedhrNode
. - Using the
appendChild
method, append child nodehrNode
to parent nodedivNode
.
- Using the
createElement
method, create a new ordered list (<ol>) node and then assign the returned node object to new variable namedolNode
. - Using the
createElement
method, create a new list item (<li>) node and then assign the returned node object to a new variable namedliNode1
. - Using the
createElement
method, create a new list item (<li>) node and then assign the returned node object to a new variable namedliNode2
. - Using the
createTextNode
method, create a new text node with value "Read Assignment" and then assign the returned node object to a new variable namedliTextNode2
. - Using the
createTextNode
method, create a new text node with value "Code Assignment" and then assign the returned node object to a new variable namedliTextNode2
. - Using the
appendChild
method, append the child nodeliTextNode1
to parent nodeliNode1
. - Using the
appendChild
method, append the child nodeliTextNode2
to parent noedliNode2
. - Using the
appendChild
method, append the child nodeliNode1
to parent nodeolNode
. - Using the
appendChild
method, append the child nodeliNode2
to parent nodeolNode
. - Using the
appendChild
method, append child nodeolNode
to parent nodedivNode
.
- Using the
createElement
method, create a new image (<img>) node and then assign the returned node object to a new variable namedimgNode
. - Using the
createAttribute
method, create a new attribute named "src" and then assign the returned node object to a new variable namedsrcAttr
. - Set the value of the
srcAttr
(i.e.srcAttr.value
) to "http://munsellb.people.cofc.edu/img/prettypicture.jpg". - Using the
setAttributeNode
method, add child nodesrcAttr
to parent nodeimgNode
. - Using the
appendChild
method, append child nodeimgNode
to parent nodedivNode
.