How to create div and append in JavaScript?

This post will discuss how to dynamically create a <div> element in JavaScript and jQuery.

Table of Contents Show

1. Using JavaScript
2. Using jQuery
Can you append to a div in JavaScript?
How to create div in JavaScript?
How to create element and append in JavaScript?
How do I append something to a div?

1. 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

document.addEventListener('DOMContentLoaded', function() {

var div = document.createElement('div');

div.id = 'container';

div.innerHTML = 'Hi there!';

div.className = 'border pad';

document.body.appendChild(div);

}, false);

HTML

<!doctype html>

</html>

CSS

.border {

border: 1px solid grey;

}

.pad {

padding: 15px;

}

Edit in JSFiddle

2. Using jQuery

With jQuery, you can use the .append() method to append the <div> element at the end of the specified container.

JS

$(document).ready(function() {

$('#outerdiv').append(

$('<div>').prop({

id: 'innerdiv',

innerHTML: 'Hi there!',

className: 'border pad'

})

);

});

HTML

<!doctype html>

<body>

</body>

</html>

CSS

.border {

border: 1px solid grey;

}

.pad {

padding: 15px;

}

Edit in JSFiddle

This can be shortened to:

JS

$(document).ready(function() {

$('#outerdiv').append('<div id="innerdiv" class="border pad">Hi there!</div>');

});

HTML

<!doctype html>

<body>

</body>

</html>

CSS

.border {

border: 1px solid grey;

}

.pad {

padding: 15px;

}

Edit in JSFiddle

Here’s alternate version using .appendTo() method:

JS

$(document).ready(function() {

$('<div id="innerdiv" class="border pad">Hi there!</div>').appendTo('#outerdiv');

});

HTML

<!doctype html>

<body>

</body>

</html>

CSS

.border {

border: 1px solid grey;

}

.pad {

padding: 15px;

}

Edit in JSFiddle

That’s all about dynamically creating a div element in JavaScript and jQuery.

Can you append to a div in JavaScript?

Using the innerHTML attribute: 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.

How to create div in JavaScript?

Create a div HTML Element in JavaScript by calling the createElement() method on the document object. This method takes an argument which will be the HTML Element.

How to create element and append in JavaScript?

To create a new element to be inserted at the end of a parent node, first use createElement to create it and then appendChild() for the newly-created element. The appendChild() method also works on existing child nodes, using which you can move them to new positions within the document.

How do I append something to a div?

Use the insertAdjacentText() method to append text to a div element, e.g. container. insertAdjacentText('beforeend', 'your text here') . The method inserts a new text node at the provided position, relative to the element it was called on.