Create Element JavaScript

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
JQuery Remove Element
JQuery Remove Element

With jquery, We can easily remove different HTML elements. Before reading this post please refer our JQuery Create Element post...

Close