Javascript add element to div

JavaScript CreateElement

Summary: in this tutorial, you will learn how to use the JavaScript document.createElement() to create a new HTML element and attach it to the DOM tree.

To create an HTML element, you use the document.createElement() method:

let element = document.createElement(htmlTag);Code language: JavaScript (javascript)

The document.createElement() accepts an HTML tag name and returns a new Node with the Element type.

1) Creating a new div example

Suppose that you have the following HTML document:

html> html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> body> html>Code language: HTML, XML (xml)

The following example uses the document.createElement() to create a new element:

let div = document.createElement('div');Code language: JavaScript (javascript)

And add an HTML snippet to the div :

div.innerHTML = 'p>CreateElement example p>';Code language: HTML, XML (xml)

To attach the div to the document, you use the appendChild() method:

document.body.appendChild(div);Code language: CSS (css)

html> html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> script> let div = document.createElement('div'); div.id = 'content'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div); script> body> html>Code language: HTML, XML (xml)

Adding an id to the div

If you want to add an id to a div , you set the id attribute of the element to a value, like this:

let div = document.createElement('div'); div.id = 'content'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)

Adding a class to the div

The following example set the CSS class of a new div note :

let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)

Adding text to a div

To add a piece of text to a , you can use the innerHTML property as the above example, or create a new Text node and append it to the div :

// create a new div and set its attributes let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new text node and add it to the div let text = document.createTextNode('CreateElement example'); div.appendChild(text); // add div to the document document.body.appendChild(div);Code language: JavaScript (javascript)

Adding an element to a div

To add an element to a div , you create an element and append it to the div using the appendChild() method:

let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new heading and add it to the div let h2 = document.createElement('h2'); h2.textContent = 'Add h2 element to the div'; div.appendChild(h2); // add div to the document document.body.appendChild(div); Code language: JavaScript (javascript)

2) Creating new list items ( li ) example

Let’s say you have a list of items:

ul id="menu"> li>Home li> ul> Code language: HTML, XML (xml)

The following code adds two li elements to the ul :

let li = document.createElement('li'); li.textContent = 'Products'; menu.appendChild(li); li = document.createElement('li'); li.textContent = 'About Us'; // select the ul menu element const menu = document.querySelector('#menu'); menu.appendChild(li); Code language: JavaScript (javascript)

ul id="menu"> li>Home li> li>Products li> li>About Us li> ul>Code language: HTML, XML (xml)

3) Creating a script element example

Sometimes, you may want to load a JavaScript file dynamically. To do this, you can use the document.createElement() to create the script element and add it to the document.

The following example illustrates how to create a new script element and loads the /lib.js file to the document:

let script = document.createElement('script'); script.src = '/lib.js'; document.body.appendChild(script);Code language: JavaScript (javascript)

You can first create a new helper function that loads a JavaScript file from an URL:

function loadJS(url) < let script = document.createElement('script'); script.src = url; document.body.appendChild(script); >Code language: JavaScript (javascript)

And then use the helper function to load the /lib.js file:

loadJS('/lib.js');Code language: JavaScript (javascript)

To load a JavaScript file asynchronously, you set the async attribute of the script element to true :

function loadJSAsync(url) < let script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); >Code language: JavaScript (javascript)

Summary

• The document.createElement() creates a new HTML element.
• The element.appendChild() appends an HTML element to an existing element.

Источник

HTML DOM Element appendChild()

The appendChild() method appends a node (element) as the last child of an element.

See Also:

Related Document Methods:

Syntax

Parameters

Return Value

More Examples

To create a paragraph with a text.

• Create a paragraph element
• Create a text node
• Append the text node to the paragraph
• Append the paragraph to the document.

Create a

element and append it to a element:

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

Create a

element and append it to the document’s body:

const para = document.createElement(«P»);
const node = document.createTextNode(«This is a paragraph.»);

Browser Support

element.appendChild() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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.

Источник

Add Element To Div Using appendChild() JavaScript

Learn how to add one or more HTML elements using appendChild() method in JavaScript.

1. Add Element Using appendChild()

Here is a simple HTML Markup

When you call the appendChild() method, it will add the newly created elements after the last child of the element inside the parent element.

Which is similar to the append() method.

const boxWrapper = document.getElementById("box-wrapper"); const box = document.createElement("div"); box.innerHTML = 'div 
5'; box.style.backgroundColor = "orange"; box.classList.add("box"); boxWrapper.appendChild(box);

Try it out

2. Add Multiple Child Elements As Siblings

Unlike the append() method, the appendChild() only allows you to add a single element in a single query.

If you want to add more child elements for the same parent, you’ll need to call it again with a new element as an argument.

const boxWrapper = document.getElementById("box-wrapper"); const box5 = document.createElement("div"); box5.innerHTML = 'div 
5'; box5.style.backgroundColor = "orange"; box5.classList.add("box"); const box6 = document.createElement("div"); box6.innerHTML = 'div 
6'; box6.style.backgroundColor = "orange"; box6.classList.add("box"); boxWrapper.appendChild(box5); boxWrapper.appendChild(box6);

3. Add Nested Child Elements One Inside The Other

Using appendChild(), we can easily add one element inside another element by chaining the appendChild() methods.

Unlike the append() method, the appendChild() method returns the appended element.

As you can see, I’ve called the appendChild() method on the boxWrapper object.

The argument is Object.assign() which is one of the easiest way to chain appendChild() to add nested child elements.

1. Element that you want to create, like div or buttons
2. A JavaScript object where you’ll add one or more properties for the element.

boxWrapper.appendChild( Object.assign( document.createElement('div'), < classList : 'box', innerHTML: "div 
5" > ) ).appendChild( Object.assign( document.createElement("button"), < innerHTML: "Button" >) )

In here, I first added the div elements which is box 5.

Then, I’ve chained the appendChild() method to add a child element inside the box 5 element which is the button.

Источник