Here is an example where getElementById() and innerHTML are used to display debugging information in an HTML document. Suppose the document has the following div element:
Then the following function call would return a reference to that div:
Now suppose that you want to add some text to the debugDiv element. You can do so by using the innerHTML property as follows:
You can append text by using the += assignment operator:
Suppose that you wanted to display the value of a variable, name. You could use a line of code like this:
Using getElementById and innerHTML to add text to the debugging div takes two lines of code. Using basic DOM functions would require code to traverse the DOM tree, find the right element, create a new node, and append the new node to its parents list of child notes. That code could easily be five or ten times longer, and would be more difficult to understand, debug, and maintain.
When you set the value of the innerHTML property you can use
The browser will re-parse the element and format it accordingly, which is
powerful and dangerous.
It's powerful because you could build a table, or include a video player or
do anything else you can do with HTML.
It can be dangerous, however, if you put unfiltered user input into a
Doing so could the web page open to cross-site scripting attacks.
You can read about cross-site scripting attacks in this Wikipedia article:
and on this web site:
The type of each node determines what kinds of nodes it can have as
Here is a summary of the parent-child relationships that are most important
for this class:
• A document node can have (at most) one element as a child.
• Elements can have other element nodes and text nodes as children.
• Text nodes don't have child nodes.
You can read more about node types on this w3schools page: https://www.w3schools.com/jsref/prop_node_nodetype.asp
In addition to the family-relationship terms mentioned in the book (parent, child, sibling), the terms ancestor and descendant are also used to describe relationships of nodes in a DOM tree.
Here's some code that demonstrates using document.createElement: