Para agregar los datos al elemento <div> tenemos que usar técnicas de manipulación DOM (Document Object Model) . El enfoque es crear un <div> vacío con una identificación dentro del esqueleto HTML. Luego, esa identificación se usará para obtener ese <div> y luego manipularemos el texto interno de ese div.
Sintaxis:
document.getElementById("div_name").innerText += "Your Data Here";
Ejemplo:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</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>
Producción:
- Antes de agregar los datos:
- Después de agregar los datos:
Publicación traducida automáticamente
Artículo escrito por shubhamr238 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA