JavaScript cloneNode Summary: in this tutorial, you will learn how to use the JavaScript cloneNode() method to clone an element. The cloneNode() is a method of the Node interface that allows you to clone an element: let clonedNode = originalNode.cloneNode(deep); Code language: JavaScript (javascript) Pamaraters deep The cloneNode() method accepts an optional parameter deep: If…
Read more
JavaScript replaceChild Summary: in this tutorial, you will learn how to use the JavaScript Node.replaceChild() method to replace an HTML element by a new one. To replace an HTML element, you use the node.replaceChild() method: parentNode.replaceChild(newChild, oldChild); Code language: CSS (css) In this method, the newChild is the new node to replace the oldChild node…
Read more
JavaScript insertAdjacentHTML Summary: in this tutorial, you’ll learn how to use the insertAdjacentHTML() method to insert HTML into the document. Introduction to JavaScript insertAdjacentHTML() method The insertAdjacentHTML() is a method of the Element interface so that you can invoke it from any element. The insertAdjacentHTML() method parses a piece of HTML text and inserts the…
Read more
JavaScript prepend Summary: in this tutorial, you’ll learn about the JavaScript prepend() method that inserts Node objects or DOMString objects before the first child of a parent node. Introduction to JavaScript prepend() method The prepend() method inserts a set of Node objects or DOMString objects before the first child of a parent node: parentNode.prepend(…nodes); parentNode.prepend(…DOMStrings);…
Read more
JavaScript append Summary: in this tutorial, you’ll learn how to use the JavaScript append() method to insert a set of Node objects or DOMString objects after the last child of a parent node. Introduction to JavaScript append() method The parentNode.append() method inserts a set of Node objects or DOMString objects after the last child of…
Read more
JavaScript insertAfter Summary: in this tutorial, you will learn how to insert a new node after an existing node as a child node of a parent node. JavaScript DOM provides the insertBefore() method that allows you to insert a new node after an existing node as a child node. However, it hasn’t supported the insertAfter()…
Read more
JavaScript insertBefore Summary: in this tutorial, you will learn how to use the JavaScript insertBefore() to insert a node before another node as a child node of a specified parent node. Introduction to JavaScript insertBefore() method To insert a node before another node as a child node of a parent node, you use the parentNode.insertBefore()…
Read more
JavaScript DocumentFragment Summary: in this tutorial, you’ll learn about the JavaScript DocumentFragment interface to compose DOM nodes and update them to the active DOM tree. Introduction to the JavaScript DocumentFragment interface The DocumentFragment interface is a lightweight version of the Document that stores a piece of document structure like a standard document. However, a DocumentFragment…
Read more
JavaScript innerHTML vs createElement Summary: in this tutorial, you’ll learn the difference between the innerHTML and createElement() when it comes to creating new elements in the DOM tree. #1) createElement is more performant Suppose that you have a div element with the class container: <div class=”container”></div> Code language: HTML, XML (xml) You can new elements…
Read more
JavaScript innerHTML Summary: in this tutorial, you will learn how to use the JavaScript innerHTML property of an element to get or set an HTML markup contained in the element. The innerHTML is a property of the Element that allows you to get or set the HTML markup contained within the element: element.innerHTML = ‘new…
Read more