GithubHelp home page GithubHelp logo

whundahl / csci215_lab_05 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from csci-215-websiteprogramming/csci215_lab_05

0.0 1.0 0.0 28 KB

DOM manipulation

CSS 4.51% JavaScript 82.51% HTML 12.98%

csci215_lab_05's Introduction

Lab_05

DOM manipulation

Name: William Hundahl

DUE: 15 Oct 2017 @ 11:59 pm

Instructions:

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 _____.

Task 1:

  1. Copy and paste the contents of the structure, presentation, and behavior txt files into the appropriate web files.
  2. Use the getElementById method to locate element with id equal to fiddle and then assign the returned node object to a new variable named divNode.

Task 2:

  1. Using the createElement method, create a new paragraph (<p>) node and then assign the returned node object to a new variable named pNode.
  2. 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 named pTextNode.
  3. Using the appendChild method, append child node pTextNode to parent node pNode.
  4. Using the appendChild method, append child node pNode to parent node divNode.

Task 3:

  1. Using the createElement method, create a new horizontal rule (<hr>) node and then assign the returned node object to a new variable named hrNode.
  2. Using the appendChild method, append child node hrNode to parent node divNode.

Task 4:

  1. Using the createElement method, create a new ordered list (<ol>) node and then assign the returned node object to new variable named olNode.
  2. Using the createElement method, create a new list item (<li>) node and then assign the returned node object to a new variable named liNode1.
  3. Using the createElement method, create a new list item (<li>) node and then assign the returned node object to a new variable named liNode2.
  4. Using the createTextNode method, create a new text node with value "Read Assignment" and then assign the returned node object to a new variable named liTextNode2.
  5. Using the createTextNode method, create a new text node with value "Code Assignment" and then assign the returned node object to a new variable named liTextNode2.
  6. Using the appendChild method, append the child node liTextNode1 to parent node liNode1.
  7. Using the appendChild method, append the child node liTextNode2 to parent noed liNode2.
  8. Using the appendChild method, append the child node liNode1 to parent node olNode.
  9. Using the appendChild method, append the child node liNode2 to parent node olNode.
  10. Using the appendChild method, append child node olNode to parent node divNode.

Task 5:

  1. Using the createElement method, create a new image (<img>) node and then assign the returned node object to a new variable named imgNode.
  2. Using the createAttribute method, create a new attribute named "src" and then assign the returned node object to a new variable named srcAttr.
  3. Set the value of the srcAttr (i.e. srcAttr.value) to "http://munsellb.people.cofc.edu/img/prettypicture.jpg".
  4. Using the setAttributeNode method, add child node srcAttr to parent node imgNode.
  5. Using the appendChild method, append child node imgNode to parent node divNode.

csci215_lab_05's People

Contributors

kabriggs991 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.