<!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
>