With Javascript, We can easily create different HTML elements and also append them to other elements.
Read Also: Remove Element JavaScript
Suppose we want to insert a new list element inside <ul> elements using javascript.
Here, we create <li> elements using javascript as follows:
<script>
var newelement = document.createElement("li");
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
selectul.appendChild(newelement);
newelement.innerHTML = "Errorsea";
</script>Explanation:
- First we create a new <li> element using document.createElement() function.
- We select <div> tag using id container.
- We select <ul> tag using getElementsByTagName() function.
- We append this new <li> element inside the <ul> tag.
- We insert text inside <li> element.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - javascript create element</title>
</head>
<body>
<div id="container">
<ul>
<li>Nachiket</li>
<li>Monil</li>
<li>Yash</li>
</ul>
</div>
<script>
var newelement = document.createElement("li");
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
selectul.appendChild(newelement);
newelement.innerHTML = "Errorsea";
</script>
</body>
</html>Note: We can insert javascript anywhere inside head or body tag. It is suitable to add javascript at the end of body tag.
We can also insert <li> tag at the beginning of <ul> tag using javascript. Here, we create <li> elements using javascript as follows:
<script>
var newelement = document.createElement("li");
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var selectli = selectul.getElementsByTagName("li")[0];
selectul.insertBefore(newelement,selectli);
newelement.innerHTML = "Errorsea";
</script>Explanation:
- First we create a new <li> element using document.createElement() function.
- We select <div> tag using id container.
- We select <ul> tag using getElementsByTagName() function.
- We select first <li> tag using getElementsByTagName()[0] function.
- We append this new <li> element inside the <ul> tag at first position.
- We insert text inside <li> element.
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - javascript create element</title>
</head>
<body>
<div id="container">
<ul>
<li>Nachiket</li>
<li>Monil</li>
<li>Yash</li>
</ul>
</div>
<script>
var newelement = document.createElement("li");
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var selectli = selectul.getElementsByTagName("li")[0];
selectul.insertBefore(newelement,selectli);
newelement.innerHTML = "Errorsea";
</script>
</body>
</html>
