How to append div dynamically in JavaScript?

Question

jQuery: Append a div element with all contents dynamically to the body elementLast update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

Table of Contents Show

jQuery core : Exercise-6 with Solution
Definition and Usage
Return Value
More Examples
Browser Support
How to dynamically add div JavaScript?
How to add element dynamically in JavaScript?
How to add a div using JavaScript?
How to add id dynamically in JavaScript?

jQuery core : Exercise-6 with Solution

Write jQuery code to append a div element (and all of its contents) dynamically to the body element.

Insert the following code within HTML <body> tag :

<div>
;<h1>JQuery Core</h1></div>

Solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Append a div element (and all of its contents) dynamically to the body element</title>
</head>
<body>

</body>
</html>

JavaScript Code :

$( "<div><h1>JQuery Core</h1></div>" ).appendTo( "body" );

Live Demo:

See the Pen jquery-core-exercise-6 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Check/uncheck a checkbox input or radio button.
Next: Write a jQuery Code to get a single element from a selection.

What is the difficulty level of this exercise?

Easy Medium Hard

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.

Weekly Trends
Java Basic Programming Exercises
SQL Subqueries
Adventureworks Database Exercises
C# Sharp Basic Exercises
SQL COUNT() with distinct
JavaScript String Exercises
JavaScript HTML Form Validation
Java Collection Exercises
SQL COUNT() function
SQL Inner Join
JavaScript functions Exercises
Python Tutorial
Python Array Exercises
SQL Cross Join
C# Sharp Array Exercises

Examples

Append an item to a list:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Try it Yourself »

Move an item from one list to another:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Try it Yourself »

More examples below.

Definition and Usage

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

Syntax

element.appendChild(node)

or

Parameters

ParameterDescriptionnodeRequired.
The node to append.

Return Value

TypeDescriptionNodeThe appended node.

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.");

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Try it Yourself »

Create a

element and append it to the document's body:

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

para.appendChild(node);
document.body.appendChild(para);

Try it Yourself »

Browser Support

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

It is fully supported in all browsers:

ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYes9-11

To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

Syntax:

element.innerHTML += "additional HTML code"

or

element.innerHTML = element.innerHTML + "additional HTML code"

Example:

html

<!DOCTYPE html>

<html>

<head>

element.innerHTML = element.innerHTML + "additional HTML code"

1<

element.innerHTML = element.innerHTML + "additional HTML code"

3>

element.innerHTML = element.innerHTML + "additional HTML code"

5

element.innerHTML = element.innerHTML + "additional HTML code"

6

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8

element.innerHTML = element.innerHTML + "additional HTML code"

3>

element.innerHTML = element.innerHTML + "additional HTML code"

1<

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

3>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

6

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

8

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

9

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7<!DOCTYPE html>1

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>5

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7<!DOCTYPE html>7

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

3>

element.innerHTML = element.innerHTML + "additional HTML code"

8head>

<<9>

element.innerHTML = element.innerHTML + "additional HTML code"

1<html3 html4html5html6>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<>0>1>0>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<>6>

>8>9

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5

element.innerHTML = element.innerHTML + "additional HTML code"

8>6>

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8html3>

element.innerHTML = element.innerHTML + "additional HTML code"

1<<1 <2html5<4<5<1>

element.innerHTML = element.innerHTML + "additional HTML code"

1<head0>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5head3

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7head5

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7head7head8head9head8

element.innerHTML = element.innerHTML + "additional HTML code"

01

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8head0>

element.innerHTML = element.innerHTML + "additional HTML code"

8<9>

element.innerHTML = element.innerHTML + "additional HTML code"

8html>

Output:

Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.

Using the insertAdjacentHTML() method:

HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters:

The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
The HTML code you want to insert enclosed in quotes

Syntax:

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

HTML

<!DOCTYPE html>

<html>

<head>

element.innerHTML = element.innerHTML + "additional HTML code"

1<

element.innerHTML = element.innerHTML + "additional HTML code"

3>

element.innerHTML = element.innerHTML + "additional HTML code"

5

element.innerHTML = element.innerHTML + "additional HTML code"

28

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8

element.innerHTML = element.innerHTML + "additional HTML code"

3>

element.innerHTML = element.innerHTML + "additional HTML code"

1<

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

3>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

6

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

8

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7<!DOCTYPE html>1

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

element.innerHTML = element.innerHTML + "additional HTML code"

1<!DOCTYPE html>5

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5

element.innerHTML = element.innerHTML + "additional HTML code"

48

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

3>

element.innerHTML = element.innerHTML + "additional HTML code"

8head>

<<9>

element.innerHTML = element.innerHTML + "additional HTML code"

1<html3 html4html5html6>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<>0>1>0>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<>6 html4html5

element.innerHTML = element.innerHTML + "additional HTML code"

80>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5

element.innerHTML = element.innerHTML + "additional HTML code"

83>6>

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8html3>

element.innerHTML = element.innerHTML + "additional HTML code"

1<<1 <2html5<4<5<1>

element.innerHTML = element.innerHTML + "additional HTML code"

1<head0>

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5head3

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

7

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

07

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

08head7head8head9head8

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

13

elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

5<!DOCTYPE html>3

element.innerHTML = element.innerHTML + "additional HTML code"

1

element.innerHTML = element.innerHTML + "additional HTML code"

8head0>

element.innerHTML = element.innerHTML + "additional HTML code"

8<9>

element.innerHTML = element.innerHTML + "additional HTML code"

8html>

OUTPUT:

Note: You should never insert the HTML code in this way if you are taking it as input from the user. It opens your website to cross-site scripting vulnerabilities.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How to dynamically add div JavaScript?

Dynamically create a <div> element with JavaScript/jQuery.

Using JavaScript. In vanilla JavaScript, you can use the native createElement() method to create an HTML <div> element and the appendChild() method to append the <div> element to another container. JS. ... .

Using jQuery. With jQuery, you can use the ..

How to add element dynamically in JavaScript?

New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method.

How to add a div using JavaScript?

Set the innerHTML Property of document. body to a string with HTML code to add content to the body element. For example, we can write: const div = '<div>hello</div>'; document.