How to create a new element in javascript
Use the following methods to create new nodes:?
element.cloneNode() clones an element and returns the resulting node.?
document.createElement(element) creates a new element node.?
document.createTextNode(text) creates a new text node.
For example:
var node = document.createTextNode("Some new text");
his will create a new text node, but it will not appear in the document until you append it to an existing element with one of the following methods:?
element.appendChild(newNode)?adds a new child node to an element as the last child node.?
element.insertBefore(node1, node2)?inserts node1 as a child before node2.?
Example
HTML File :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="demo">some content</div>
</body>
</html>
JS File :
//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
//creating a new paragraph
var p = document.createElement("p");
var node = document.createTextNode("Some new text");
//adding the text to the paragraph
p.appendChild(node);
var div = document.getElementById("demo");
//adding the paragraph to the div
div.appendChild(p);
};