Javascript add element to dom element

JavaScript HTML DOM Elements (Nodes)

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.

Example

const para = document.createElement(«p»);
const node = document.createTextNode(«This is new.»);
para.appendChild(node);

const element = document.getElementById(«div1»);
element.appendChild(para);

Example Explained

This code creates a new

element:

To add text to the

element, you must create a text node first. This code creates a text node:

Then you must append the text node to the

element:

Finally you must append the new element to an existing element.

This code finds an existing element:

This code appends the new element to the existing element:

Creating new HTML Elements — insertBefore()

The appendChild() method in the previous example, appended the new element as the last child of the parent.

If you don’t want that you can use the insertBefore() method:

Example

const para = document.createElement(«p»);
const node = document.createTextNode(«This is new.»);
para.appendChild(node);

const element = document.getElementById(«div1»);
const child = document.getElementById(«p1»);
element.insertBefore(para, child);

Removing Existing HTML Elements

To remove an HTML element, use the remove() method:

Example

Example Explained

The HTML document contains a element with two child nodes (two

elements):

Find the element you want to remove:

Then execute the remove() method on that element:

The remove() method does not work in older browsers, see the example below on how to use removeChild() instead.

Removing a Child Node

For browsers that does not support the remove() method, you have to find the parent node to remove an element:

Example

Example Explained

This HTML document contains a element with two child nodes (two

elements):

Find the element with id=»div1″ :

Find the

element with id=»p1″ :

Remove the child from the parent:

Here is a common workaround: Find the child you want to remove, and use its parentNode property to find the parent:

Replacing HTML Elements

To replace an element to the HTML DOM, use the replaceChild() method:

Example

const para = document.createElement(«p»);
const node = document.createTextNode(«This is new.»);
para.appendChild(node);

const parent = document.getElementById(«div1»);
const child = document.getElementById(«p1»);
parent.replaceChild(para, child);

Источник

Thanks!

Support me by buying me a coffee, sponsoring, or hiring me to do a beautiful website for you!

How to Add an Element to the DOM?

Nowadays, JavaScript frameworks like React or Vue have taken the «pleasure» of managing the DOM (Document Object Model) from most of the developers. So, unless you’re a curious person, UI library creator, or someone who doesn’t like to over-rely or use frameworks at all, you won’t find this blog post useful. 😉 But anyway, here are all the ways of adding an element to the DOM directly.

Basics stuff

Creating elements

To create a new HTML element, you have to use the document.createElement() method.

const el = document.createElement("div"); 

The method takes a string as a tag name for the element (automatically converted to lowercase), and an optional options object, which matters only for Web Components.

Namespaces

You have to know that document.createElement() works only for the HTML elements. This means that elements from a different namespace (most notably SVG-ones) won’t work correctly.

To fix that issue, you have to use the document.createElementNS() method, which creates an element with the specified namespace URI.

const svg = document.createElementNS("", "svg"); 

Movements

Now, when working with newly-created elements, adding them to the DOM works just like you might expect. But things change when working with elements that are already within DOM, e.g.

/* HTML: . . */ const el = document.querySelector("app"); 

Now, when you’ll use one of the methods that we’ll talk about in a second on such an element, it won’t be added to the DOM, rather than simply moved to the new position.

No matter what parent it had before or how deep it was in the hierarchy, the element will be removed and added back again at the selected position.

Appending

AppendChild

The simplest, most well-known method of appending an element to the DOM is certainly the appendChild() .

// . document.body.appendChild(el); 

The provided element is appended at the end of the parent’s children list.

Append/prepend

Now, appendChild() has been around for a long time and is supported by pretty much all the in-use browsers. But, if you’re willing to give up some support for the sake of functionality, you might be interested in the newer append() and prepend() methods.

// . document.body.append(el); document.body.prepend(el2); document.body.append("Text"); /* HTML:   */ 

append() appends the element at the end of the parent’s children list, while prepend() inserts it at the beginning.

Both append() and prepend() feature the ability to insert strings directly into the DOM. For comparison, to achieve the same effect with appendChild() , you’d have to explicitly create a new Text node:

document.appendChild(document.createTextNode("Text")); 

In addition to that, both append() and prepend() can accept multiple arguments and thus, insert multiple nodes at once.

// . document.body.append(el, el2); document.body.appendChild(el); document.body.appendChild(el2); 

Of course, all this goodness comes at a cost. append() and prepend() don’t support some older browsers (e.g. no IE) and require (arguably simple) polyfills.

InnerHTML

As you might know, innerHTML is a property, rather than a method. You can either read it or set it to HTML string which, will be parsed as HTML and placed into the DOM.

document.body.innerHTML = "
Text
"; 

It seems like a pretty easy and straightforward solution, but it has some major drawbacks:

• The value returned from the innerHTML property access doesn’t have to be the same as the one you’ve set before, as it’s based on the element’s content and is generated dynamically.
• Setting innerHTML removes all previous content of the parent.
• innerHTML is bad for performance (in most cases), because of the necessity to parse the HTML string and remove all the previous nodes. However, if removing all the children is your goal, then innerHTML = «» is a safe bet.
• Uncontrolled changes of innerHTML can lead to security issues. Although blocks aren’t executed when created with innerHTML , there are other ways of executing possibly malicious JS code without using the block (e.g. inline events listeners)

Inserting

Insert methods, in comparison to append ones, give you more control over where you want to position your element.

InsertBefore

insertBefore() method allows you to insert an element right before the specified one, e.g.

// . document.body.append(el); document.body.insertBefore(el2, el); 

The first parameter is the element to be inserted, while the second one is used as a reference. Keep in mind that while the reference should be provided, it can be equal to null , in order to simply append the element at the end of the parent’s children list.

While there’s no «insertAfter» method or anything like that, you can achieve such an effect through the combination of the insertBefore() method with the nextElementSibling property of the reference node.

// . const insertAfter = (parent, child, reference) => < parent.insertBefore(child, reference.nextElementSibling); >; document.body.append(el); insertAfter(document.body, el2, el); 

InsertAdjacent

Next up, we’ve got a bunch of insertAdjacent methods, which allow you to insert a node in one of the possible positions, in relation to the element the method was called upon (aka target element).

There are 3 of these methods:

• insertAdjacentElement() — for elements;
• insertAdjacentHTML() — for HTML strings (like with innerHTML , but is faster and doesn’t remove prior content);
• insertAdjacentText() — for inserting Text nodes;

All of them have similar syntax, but can be used to insert only one specific kind of content. Take a look at the example of insertAdjacentElement() call:

// . document.body.insertAdjacentElement(el, "afterbegin") 

The first parameter is the element to be inserted, while the second one is a string indicating the position at which the element is to be inserted. There are 4 available options here:

• «beforebegin» — just before the target element;
• «afterbegin» — at the top of the target element’s children tree;
• «beforeend» — at the bottom of the target element’s children tree;
• «afterend» — just after the target element;

Sibling-relative placement

In comparison to all the previous methods, the after() and before() methods rely on the sibling nodes rather than the parent itself. They can insert multiple nodes (elements and text nodes) at once and have support similar to append() or prepend() .

// . document.body.append(el); el.after(el2, el3); 

Replacement

Lastly, if you want to insert an element in place of a previous one, i.e. replace it, you can use the replaceChild() method, together with providing the new and previous element respectively.

// . document.body.append(el); document.body.replaceChild(el2, el); 

There’s a lot

So, these are all of the available methods for inserting a new element to the DOM (at least to my knowledge). Again, unless you’re a library author or don’t want to use any framework except Vanilla JS, then these methods won’t matter to you much. However, it’s still nice to know at least a little bit about what’s going on under-the-hood.

If you like the post consider sharing it and following me on Twitter, Facebook, or through my weekly newsletter. If you’re interested, I also recommend checking out my YouTube channel. Again, thanks for reading this piece and have a nice day!

Author

Arek Nawo

Hobbyist. Web Developer. Freelancer. Blogger. Making awesome websites like this one.

Read more

Fixing Class Composition in Tailwind CSS

Class composition issues have been plaguing Tailwind CSS for long enough — let’s look for solutions and alternatives…

Top 6 React state management libraries for 2022

The top 6 libraries to use for state management in your next React.js app…

CSS feature detection in JavaScript?!

CSS preprocessors and transformers are great, but what when they’re not enough…

Источник

Element: append() method

The Element.append() method inserts a set of Node objects or string objects after the last child of the Element . String objects are inserted as equivalent Text nodes.

• Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects.
• Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.
• Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

Syntax

append(param1) append(param1, param2) append(param1, param2, /* … ,*/ paramN) 

Parameters

A set of Node or string objects to insert.

Return value

Exceptions

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples

Appending an element

let div = document.createElement("div"); let p = document.createElement("p"); div.append(p); console.log(div.childNodes); // NodeList [ 
] 

Appending text

let div = document.createElement("div"); div.append("Some text"); console.log(div.textContent); // "Some text" 

Appending an element and text

let div = document.createElement("div"); let p = document.createElement("p"); div.append("Some text", p); console.log(div.childNodes); // NodeList [ #text "Some text", 
] 

The append method is unscopable

The append() method is not scoped into the with statement. See Symbol.unscopables for more information.

let div = document.createElement("div"); with (div)  append("foo"); > // ReferenceError: append is not defined 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник