Hay dos formas de agregar código HTML a un div a través de JavaScript
- Usando el atributo innerHTML
- Usando el método insertAdjacentHTML()
Usando el atributo innerHTML:
para agregar usando el atributo innerHTML, primero seleccione el elemento (div) donde desea agregar el código. Luego, agregue el código adjunto como strings usando el operador += en innerHTML.
Sintaxis:
element.innerHTML += "additional HTML code"
o
element.innerHTML = element.innerHTML + "additional HTML code"
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>How to Append HTML Code to a Div using Javascript</title>
<style>
body {
text-align: center;
padding: 5%;
}
h1{
color:green;
}
</style>
</head>
<body>
<div id="add_to_me">
<h1>GeeksforGeeks</h1>
<p>This is the text which has already been typed into the div</p>
</div>
<button onclick="addCode()">Add Stuff</button>
<script>
function addCode() {
document.getElementById("add_to_me").innerHTML +=
"<h3>This is the text which has been inserted by JS</h3>";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Nota: este método básicamente destruye todo el contenido del div y lo vuelve a crear. Por lo tanto, si tiene oyentes adjuntos a los Nodes secundarios de ese div, se perderán.
Usando el método insertAdjacentHTML()
El código HTML se puede agregar a un div usando el método insertAdjacentHTML(). Sin embargo, debe seleccionar un elemento dentro del div para agregar el código. Este método toma dos parámetros:
- La posición (en el documento) donde desea insertar el código (‘después de comenzar’, ‘antes de comenzar’, ‘después’, ‘antes de terminar’)
- El código HTML que desea insertar entre comillas
Sintaxis:
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>How to Append HTML Code to a Div using Javascript</title>
<style>
body {
text-align: center;
padding: 5%;
}
h1{
color: green
}
</style>
</head>
<body>
<div id="add_to_me">
<h1>GeeksforGeeks</h1>
<p id="add_after_me">
This is the text which has already been typed into the div</p>
</div>
<button onclick="addCode()">Add Stuff</button>
<script>
function addCode() {
document.getElementById("add_after_me").insertAdjacentHTML("afterend",
"<h3>This is the text which has been inserted by JS</h3>");
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Nota: nunca debe insertar el código HTML de esta manera si lo toma como una entrada del usuario. Abre su sitio web a vulnerabilidades de secuencias de comandos entre sitios.
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por JacobAntony1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA