Dynamically create a <div> element with JavaScript/jQuery

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

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.

Dynamically create a <div> element with JavaScript/jQuery

1. Using JavaScript

JS

HTML

CSS

2. Using jQuery

JS

HTML

CSS

JS

HTML

CSS

JS

HTML

CSS

Share this: