Wikiversity

JavaScript Programming/Dynamic HTML

< JavaScript Programming

This lesson introduces dynamic HTML.

Objectives and Skills

edit

Objectives and skills for this lesson include:[1]

  • Complete and debug code that locates, modifies, and adds HTML elements and attributes
    • getElementByld; getElementsByTagName; getElementsByClassName; setAttribute; createElement
    • createElement, createTextNode, appendChild

Readings

edit
  1. Wikipedia: Dynamic HTML
  2. Wikibooks: JavaScript/DHTML

Multimedia

edit
  1. YouTube: JavaScript Tutorial for Beginners - 36 - Creating a new element
  2. YouTube: JavaScript Tutorial for Beginners - 37 - Creating a new element Part 2
  3. YouTube: JavaScript Tutorial for Beginners - 38 - Remove element
  4. YouTube: JavaScript Tutorial for Beginners - 39 - Create attribute
  5. YouTube: JavaScript Create HTML Element: How to dynamically add tags to your pages
  6. YouTube: JavaScript Dynamic Welcoming Message
  7. YouTube: JavaScript Programming Tutorial 99 - Dynamically Adding Nodes

Examples

edit

Activities

edit

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

  1. Extend any of the activities from JavaScript Programming/Arrays to use an array to hold the information generated during processing and display the results from the array using dynamic HTML to create and append HTML elements after processing is complete.

Lesson Summary

edit
  • To dynamically change your HTML with JavaScript, you need to fully understand how to traverse the node tree and the relationship between nodes.[2]
  • Each HTML element node, except the root element node, has a parent node.[3]
  • Text is the value of the text node. The text node has to be created and appended to the element. [4]
  • Things DHTML is used for includes animating content, roll-over and dropdown menus, and verifying and responding to forms without using the server. [5]
  • To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.[4]
  • Creating strings and consectively adding HTML elements to them is a a common method of creating new elements to HTML using javascript.

Key Terms

edit
dynamic HTML
Dynamic HTML (DHTML) is based on properties of the HTML, JavaScript, CSS, and DOM which helps in making dynamic content. DHTML makes use of Dynamic object model to make changes in settings and also in properties and methods.[6]
node
Every Element in the HTML document is a node [7]
NodeList object
A NodeList object is a list (collection) of nodes extracted from a document.[8]
node relationships
The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. [9]

See Also

edit

References

edit
  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ https://www.w3schools.com/js/js_htmldom_navigation.asp
  3. ↑ W3Schoolsː JavaScript HTML DOM Navigation
  4. ↑ 4.0 4.1 W3Schoolsː JavaScript HTML DOM Elements (Nodes)
  5. ↑ "Dynamic HTML". Wikipedia. 2021-04-03. https://en.wikipedia.org/w/index.php?title=Dynamic_HTML&oldid=1015848128. 
  6. ↑ https://www.geeksforgeeks.org/dhtml-introduction/
  7. ↑ https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html
  8. ↑ https://www.w3schools.com/js/js_htmldom_nodelist.asp
  9. ↑ https://www.w3schools.com/js/js_htmldom_navigation.asp
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Dynamic_HTML&oldid=2627697"