Agregar contenido HTML al elemento HTML existente mediante JavaScript

1. Inconveniente de usar InnerHTML para agregar un nuevo nodo HTML
2. Agregar contenido HTML sin reemplazar los elementos DOM
3. Uso de appendChild() para agregar contenido HTML en JavaScript
4. Uso de insertAdjectedHTML() para agregar un nodo HTML

Agregar contenido HTML a un div u otro elemento HTML con javascript es fácil. Podemos establecer la propiedad HTMLElement.innerHTML del elemento con el nuevo contenido HTML. Pero durante el proceso, borrará todos los atributos dinámicos agregados.

Inconveniente de usar InnerHTML para agregar un nuevo nodo HTML

• El HTMLElement.innerHTML funciona eliminando el contenido HTML dentro del elemento y luego volviéndolo a agregar con la nueva pieza de HTML incluida en él. En esencia, reemplaza el contenido HTML en lugar de simplemente agregar uno nuevo.
• Cuando agregamos un nuevo elemento HTML al DOM con la propiedad innerHTML, también eliminará todos los nodos descendientes y luego los reemplazará con los nuevos nodos construidos al analizar el nuevo contenido HTML (la cadena HTML que se asigna a innerHTML propiedad) y renderice todo el HTML de nuevo.
• No se sabe mucho que al utilizar innerHTML en un proyecto que se somete a una revisión de ciberseguridad, el código puede ser rechazado. Es aconsejable no utilizar innerHTMl directamente, ya que puede tener un riesgo potencial de seguridad (para obtener más detalles, consulte el enlace MDN).

Agregar contenido HTML sin reemplazar los elementos DOM

Para agregar un fragmento de código HTML a nuestro DOM existente, podemos usar las siguientes funciones incorporadas de javascript sin tener el temor de perder cualquier contenido dinámico ya adjunto con ellas.

• appendChild()
• insertAdjacentHTML()

Uso de appendChild() para agregar contenido HTML en JavaScript

appendChild() tiene el mismo propósito que el innerHTML. Podemos usar ambos métodos para agregar contenido HTML a un nodo. La diferencia entre los dos enfoques es que appendChild() es una función, mientras que innerHTML es una propiedad. appendChild() agregará un nodo al elemento DOM existente en lugar de reemplazar el contenido del DOM como lo hace la propiedad innerHTML.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

Hemos creado un formulario para capturar el name y la address del usuario utilizando el código anterior. La dirección suele tener más de una línea. Por lo tanto, hemos creado un botón que agrega nuevos campos de entrada cuando se hace clic para capturar estas líneas de dirección adicionales. A continuación se muestra el proceso seguido para crear un nuevo campo de entrada.

1. Llamamos a la función addAddressLine en el evento de clic del botón Add Address Line.
2. En la función, creamos HTML input dinámicamente con la función document.createElement('input'). Devuelve el elemento de input creado que se almacenó en la variable i.
3. A continuación, establecemos los atributos type y placeholder a la variable input creada con el método setAttribute().
4. Tenemos el elemento input listo para ser agregado a la estructura div existente. Por lo tanto, consultamos la address div usando docuemnt.getElementById() que devuelve la estructura div como un todo y luego usamos la función appendChild(i) de JavaScript.
5. La función appendChild(i) agrega el elemento input creado dinámicamente en poder de la variable i y lo coloca al final de la address div. Usamos lineCount para incrementar el valor del marcador de posición cada vez que agregamos un nuevo campo de entrada.

Nota

• También podemos usar el método más nuevo append() para agregar el elemento creado al DOM. El método javascript append nos permite utilizar DOMString (textos de cadena simple) como argumento y no devuelve ningún valor. Tenga en cuenta que el navegador Internet Explorer no admite el método append() más reciente.
• Todos los navegadores web modernos, incluido Internet Explorer, admiten la función anterior appendChild().

Uso de insertAdjectedHTML() para agregar un nodo HTML

Las funciones appendChild() e incluso append() son capaces de agregar nuevos elementos al nodo HTML dado. Ambos métodos insertan el elemento después del último hijo. Puede que no sea útil para todos los escenarios. Especialmente si deseamos agregar el nodo HTML en una posición específica en la estructura HTML. Para tales casos, se puede utilizar la función insertAdjectedHTML(). Se necesitan un par de parámetros, la posición y el texto en esa posición.

• Posición: insertarHTML adyacente admite cuatro valores en el parámetro de posición.

  • beforebegin: Para insertar el nodo HTML antes del inicio del elemento.
  • afterbegin: como sugiere el nombre, esta opción inserta el elemento justo después de la etiqueta de apertura del nodo seleccionado y lo coloca antes del primer hijo.
  • beforeend: Éste es similar al appendChild(). Como sugiere el nombre, la posición beforeend coloca el elemento justo después del último hijo.
  • afterend: se refiere a la posición después de que se cierra la etiqueta de nodo HTML de destino.

• String: Podemos insertar el HTML en formato string como segundo parámetro. Por ejemplo: <div> Hello World!</div>.

De un vistazo, la representación es la siguiente.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Veamos el mismo ejemplo que discutimos para appendChild() con la función insertAdjectedHTML() de JavaScript.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

En este código, hemos utilizado la opción beforeend en el parámetro para agregar el elemento de entrada creado dinámicamente al final del div address. Puede intentar jugar con los otros atributos como los parámetros afterend, beforebegin y afterbegin.