CREATING MARKUP ON THE FLY in Font

Encoder QR Code in Font CREATING MARKUP ON THE FLY

The node exists. It has the nodeName property with the value "P". It also has a nodeType property with the value 1, which means it s an element node. But this node is not connected to the node tree of the document, test.html.

The simplest way to insert a newly created node into the node tree of a document is to make it a child of an existing node in that document. In test.html, a new paragraph should be inserted into the element node identified as "testdiv". In other words, the paragraph element should be a child node of the "testdiv" element. You can do this with a method called appendChild. This is the syntax for appendChild: parent.appendChild(child) In the case of test.html, the child is the paragraph you just created with createElement. The parent is the "testdiv" element node. You ll need to reference this node using a DOM method. The simplest way to reference the node in this case is to use getElementById. As usual, you can make life simpler for yourself, and make your code easier to read, by assigning the element to a variable: var testdiv = document.getElementById("testdiv"); The variable testdiv contains a reference to the element with the id "testdiv". You already have a variable, para, which contains a reference to the newly created paragraph node: var para = document.createElement("p"); You can insert para into testdiv using appendChild: testdiv.appendChild(para); The newly created paragraph element is now a child of the "testdiv" element. It has been moved from JavaScript limbo and inserted into the node tree of test.html. You don t need to use variables when you use appendChild. You could just write the following: document.getElementById("testdiv").appendChild( document.createElement("p")); As you can see, that s quite confusing to read. It s worth the extra few lines to write this: var para = document.createElement("p"); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para);

You have now created an element node and inserted it into the node tree of the document. The node you have created is an empty paragraph element. If you want to put some text into that paragraph, you can t use createElement. That works only for creating element nodes. You need to create a text node.

Note Don t let the names of the methods confuse you. It would be clearer if the methods were called createElementNode and createTextNode, or simply createElement and createText. But instead, the names are createElement and createTextNode.

You can do this using a method called createTextNode. The syntax for createTextNode is very similar to the syntax for createElement: document.createTextNode(text) This is how you would create the text Hello world : document.createTextNode("Hello world"); Again, it s a good idea to assign a variable to contain the newly created node: var txt = document.createTextNode("Hello world"); The variable txt contains a reference to the newly created text node. This node is floating free in JavaScript. It hasn t been tethered to the node tree of a document. You can use appendChild to make the text the child node of an existing element. You could insert the text into the paragraph element you created. The variable para is a reference to the paragraph element. The variable txt is a reference to the newly created text node: para.appendChild(txt); The text node with the value "Hello world" is now a child node of the paragraph element. Try writing this into the example.js file: window.onload = function() { var para = document.createElement("p"); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); var txt = document.createTextNode("Hello world"); para.appendChild(txt); } If you reload test.html, you will see the text Hello world in the browser window.

In this example, nodes were created and appended in this order: 1. 2. 3. 4. Create a paragraph element node. Append this paragraph to an element node in the document. Create a text node. Append this text node to the paragraph.

You can also use appendChild to join nodes that aren t yet part of the document tree. That means you could rewrite the steps in this order: 1. 2. 3. 4. Create a paragraph element node. Create a text node. Append this text node to the paragraph. Append this paragraph to an element node in the document.

This is how the reorganized function would look: window.onload = function() { var para = document.createElement("p"); var txt = document.createTextNode("Hello world"); para.appendChild(txt); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); } The end result is the same. Write this version in the example.js file and reload the test.html document in a web browser. You will see the text Hello world, just as before.