To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div.
Syntax:
document.getElementById("div_name").innerText += "Your Data Here";
Example:
<!DOCTYPE html> < html >
< head >
< title >
How to append data to
div using JavaScript ?
</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "container" >
< h1 style = "text-align:center;color:green;" >
GeeksforGeeks
</ h1 >
< hr >
< form >
< div class = "form-group" >
< label for = "" >Enter Your Name:</ label >
< input id = "name" class = "form-control"
type = "text"
placeholder = "Input Your Name Here" >
</ div >
< div class = "form-group text-center" >
< button id = "my_button"
class = "btn btn-outline-success btn-lg"
type = "button" >
Add Name
</ button >
</ div >
</ form >
< h3 >List of Names:</ h3 >
< div id = "my_div" ></ div >
</ div >
< script >
function append_to_div(div_name, data){
document.getElementById(div_name).innerText += data;
}
document.getElementById("my_button")
.addEventListener('click', function() {
var user_name = document.getElementById("name");
var value = user_name.value.trim();
if(!value)
alert("Name Cannot be empty!");
else
append_to_div("my_div", value+"\n");
user_name.value = "";
});
</ script >
</ body >
</ html >
|
Output:
-
Before Adding the Data:
-
After Adding the Data:
Recommended Articles