ADD new element dynamically using Html and Javascript
1 min readDec 22, 2021
Adding dynamic element is one of the challenging task for the beginner who just started leaning web development and to start making todo list kind of project.
Here in this article i will be going through working and easily understandable code.
First example::
HTML Code<html>
<body>
<button onclick="create()">Create Heading</button>
</body>
</html>Javascript code:: function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
document.body.appendChild(h1);
}
Second example::
HTML Code<body>
<h1>My ToDo List</h1>
<input type="text" id="getValues" />
<button onclick="myFunction()"> Add task </button>
</body>Javascript Code::function myFunction(){
var inputValue = document.getElementById("getValues").value;
var li= document.createElement('li');
li.textContent= inputValue;
document.body.appendChild(li);
console.log("The value in the text box is ="+inputValue);
}
Practise both example, you will understand it.
I Post regularly on twitter content based on javascript, html, css and angular.Please follow there in twitter to get interesting concept based on the javascript.
