In my previous article I have explained about searching through dom tree using dojo.query. That is very helpful for searching any node in the tree by passing the ID or CLASS names in method parameters. But, I have not explained about how to manipulate the DOM structure. This article focuses more on manipulating the dom tree as you need. In most of the cases, we have to update the dom tree dynamically to reflect the response from the server. It is easy to update any part of the web page with the help of DOJO APIs. DOJO provides dojo/dom-construct to retrieve the DOM elements and manipulate it. This API has several methods and features that is easy to use for the complex operations. dojo/dom-construct stands for DOM construction API.
Example Listing of dojo/dom-construct : 1
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script> var dojoConfig = { baseUrl : "src", packages : [ { name : "dojo", location : "dojo" }, { name : "dijit", location : "dijit" }, { name : "dojox", location : "dojox" }, { name : "app", location : "app" }, ], parseOnLoad : true, async : true }; </script> <script src="src/dojo/dojo.js"></script> <script> require(["dojo/dom-construct", "dojo/dom-attr", "dojo/dom", "dojo/on", "dojo/domReady!"], function(domConstruct,domAttr, dom, on){ var i=0; //1 on(dom.byId("btn1"), "click", function(){ i = i + 1; var row = domConstruct.toDom("<tr><td>Test Row " + i + " </td></tr>"); domConstruct.place(row, "tableRow"); }); //2 on(dom.byId("btn2"), "click", function(){ var row = domConstruct.toDom("<div>Placed After Second Element</div>"); domConstruct.place(row, dom.byId("second"),"after"); }); //3 on(dom.byId("btn3"), "click", function(){ var row = domConstruct.toDom("<div>Replaced Third Node With This node!!</div>"); domConstruct.place(row, dom.byId("third"),"replace"); }); //4 on(dom.byId("btn4"), "click", function(){ var row = domConstruct.toDom("<div>Created Node!!</div>"); domConstruct.create(row, {id:"createNode",style:{color:"blue"}}, dom.byId("third"),"after"); }); //5 on(dom.byId("btn5"), "click", function(){ domAttr.set(dom.byId("createNode"), "style",{color:"red"}); }); }); </script> </head> <body> <button id="btn1" type="button">Add a row</button> <button id="btn2" type="button">Add After Node Second</button> <button id="btn3" type="button">Replace Third Node</button><br> <button id="btn4" type="button">Create New Node</button> <button id="btn5" type="button">Change Attributes</button> <table> <thead><tr><th>Description Column</th></tr></thead> <tbody id="tableRow"> <tr><td></td></tr> </tbody> </table> <div id="second">Second</div> <div id="third">Third</div> </body> </html>
The above code snippet is the complete example to demonstrate the various methods and parameters associated with dojo/dom-construct API. domConstruct.toDom is used for creating the DOM element for a given HTML fragment. This is the common method used across this example for creating the new nodes to DOM tree. The following points are detailed explanations for the above example.
- domConstruct.place is node placement utility method. Using this method, we can place the node anywhere in the DOM tree. This method takes the two parameters. This method takes three parameters. First parameter is the HTML fragment or ID of the node, second parameter is the reference node where the node will be inserted and the third parameter is position of the relative to the node passed in the second parameter. If the third parameter is not passed, it assumes the default value as “last”.
- domConstruct.place takes the third parameter which helps to position the node. The valid values for the third parameter is “before”, “after”, “replace”, “only”, “first”, or “last”. This parameter is optional, so the default value is “last”.
- If you pass the third parameter for domConstruct.place is “replace”, the existing node will be replaced with the new node.
- domConstruct.create is used for creating the new nodes, then set the attributes and add to the DOM tree. This can be used with existing nodes when you have to assign new attributes. This method takes the four parameters.
- tag : A string of the element to create (e.g.: “div”, “a”, “p”, “li”, “script”, “br”), or an existing DOM node to process.
- attributes : Object-hash attributes for the newly created element
- reference node : This is similar to the refNode attribute in the place method to position this new node.
- position : Position of the new node with relative to the third parameter.
- domAttr.set is used for setting the attributes to the node. It takes three parameters. First one is node reference, second one is attribute name and third parameter is the value of that attribute.
The above section explains the example code provided in this article. Apart for the methods provided above, there are many other less frequently used methods are empty and destroy. With the use of domConstruct, developers can freely update the DOM tree dynamically. I hope this article is very useful to understand the basic idea behind this API. If you run the above example code, you would get the below output screen.