EN
JavaScript - prepend element
3 points
In this article, we would like to show you how to prepend element using JavaScript.
Quick solution:
xxxxxxxxxx1
var parent = document.querySelector('#parent');2
3
parent.prepend(document.createElement('div'));Warning:
prepend()method appeared around 2015 in major web browsers.
In the below, you can find two solutions that solves the problem.
In this section, you can find solution that works in older web brosers too.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="container">5
<div>Element 1</div>6
<div>Element 2</div>7
<div>Element 3</div>8
</div>9
<script>10
11
function prependChild(parent, child) {12
var placeholder = parent.firstChild;13
if (placeholder) {14
parent.insertBefore(child, placeholder);15
} else {16
parent.appendChild(child);17
}18
}19
20
var container = document.querySelector('#container');21
22
var element = document.createElement('div');23
element.textContent = 'New element';24
25
prependChild(container, element);26
27
</script>28
</body>29
</html>
In this example, we use prepend() method that appeared around 2015 in major web browsers.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="container">5
<div>Element 1</div>6
<div>Element 2</div>7
<div>Element 3</div>8
</div>9
<script>10
11
var container = document.querySelector('#container');12
13
var element = document.createElement('div');14
element.textContent = 'New element';15
16
container.prepend(element);17
18
</script>19
</body>20
</html>
