Category: JavaScript Tutorial

python tutorials and learn python

Created with Sketch.

JavaScript cloneNode

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

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

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

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

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

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

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

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

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

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