Creation methods of elements in JavaScript

There are methods of the document object (createElement(), createAttribute(), and createTextNode()) that allow you to create various elements or nodes on the page using JavaScript.

However, the new content must be appended as a child of an existing node in the DOM.
Below you have the table of the DOM node properties.

PropertyDescription
attributesAn array of all the attributes in the specified node; the name and the value properties of this property can be used to access the attribute name or attribute value for each member of the array.
childNodesAn array of all the child nodes of the specified node.
classNameReturns the value of the class attribute of the specified node.
clientHeightReturns the height in pixels of the specified node.
clientWidthReturns the width in pixels of the specified node.
dirReturns the value of the direction of the text in the specified node (ltr or rtl).
firstChildReturns the first child node of the specified node.
idReturns the value of the id of the specified node
innerHTMLReturns the HTML code within the specified code such as all of the HTML code within a div element.
langReturns the language value of the specified node.
lastChildReturns the last child node of the specified node.
nextSiblingReturns the node following the specified node.
nodeNameReturns the name of the specified node (div for a div element for example).
nodeTypeReturns the type of the specified node.
nodeValueReturns the value of the specified node (the text within a div element or the
value of an attribute for example).
offsetHeightReturns the offset height of the specified node.
offsetWidthReturns the offset width of the specified node.
ownerDocumentReturns the document object that contains the specified node.
parentNodeReturns the parent node of the specified node.
previousSiblingReturns the node before the specified node.
scrollLeftReturns the difference between the left edge and the left edge in view of the specified document.
scrollTopReturns the difference between the top edge and the top edge in view of the specified document.
scrollHeightReturns the entire height (including anything hidden and viewable via scroll bar) of the specified node.
scroolWidthReturns the entire width (including anything hidden and viewable via scroll bar) of the specified node.
styleReturns the style object of the specified node.
tabIndexReturns the tab index of the specified node.
tagNameReturns the tag name (in uppercase) of the specified node.
titleReturns the value of the title attribute of the specified node.

The “specified node” mentioned continuously in the table works almost like any other element you worked with. Let’s consider the following HTML code:

<body>
<div id="div1" title="DanD">
This page is about me!
</div>
</body>

In order to get the value of the title attribute of the div element, you could use document.getElementById() to grab the div element by its id of div1.
This would be the specified node for the DOM node title property. To access the title property of the element node you can use the following code:

<body>
<div id="div1" title="DanD">
This page is about me!
</div>
<script type="text/javascript" >
var MeDiv = document.getElementById("div1");
var MeTitle = MeDiv.title;
document.write("The title of the div is "+MeTitle);
</script>
</body>

The MeDiv.title property returns a string value “DanD” which is the value of the div element node’s title attribute.

Leave a Reply