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
JavaScript textContent Summary: in this tutorial, you will learn how to use the JavaScript textContent property to get the text content of a node and its descendants. Reading textContent from a node To get the text content of a node and its descendants, you use the textContent property: let text = node.textContent; Code language: JavaScript…
Read more
JavaScript appendChild Summary: in this tutorial, you will learn how to use the JavaScript appendChild() method to add a node to the end of the list of child nodes of a specified parent node. Introduction to the JavaScript appendChild() method The appendChild() is a method of the Node interface. The appendChild() method allows you to…
Read more