JavaScript Programming/Dynamic HTML

This lesson introduces dynamic HTML.

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

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

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

• W3Schools: JavaScript HTML DOM - Changing HTML
• W3Schools: JavaScript HTML DOM - Changing CSS
• W3Schools: JavaScript HTML DOM Animation
• W3Schools: JavaScript HTML DOM Navigation
• W3Schools: JavaScript HTML DOM Elements (Nodes)
• W3Schools: JavaScript HTML DOM Collections
• W3Schools: JavaScript HTML DOM Node Lists
• Example Code

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.

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

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]

• Dev To: Add Dynamic Styling to HTML Elements
• Geeks for Geeks: Dynamic HTML Introduction
• InformIT: Understanding Dynamic Websites and HTML5 Applications
• JavaScript.info: Modifying the document
• Lifewire: How Dynamic HTML (DHTML) Is Used to Create Interactive Pages
• TutorialRepublic: JavaScript DOM Get Set Attributes
• Way2tutorial: Dynamic HTML
• JavaScript Info: Document
• MDN Web Docs: setAttribute() Method