JavaScript Agregar datos a Div

Mientras mantiene una página web o sitio web, hay situaciones en las que existe un requisito para una actualización de vez en cuando. En tal caso, es necesario agregar algunos datos sobre una entrada particular de los usuarios para crear y mantener los registros. Además de eso, agregar datos a Div también es de gran ayuda para integrar HTML con JavaScript para aplicar funcionalidades adicionales.

Cómo agregar datos a Div en JavaScript?

Los siguientes enfoques se pueden utilizar para agregar datos a Div en JavaScript:

• "innerhtml" propiedad.
• "insertadJacenthtml ()" método.
• "añadir Niño()" método.
• "jQuery" acercarse.

Enfoque 1: Agregar datos a Div en JavaScript utilizando la propiedad innerHTML

El "innerhtml"La propiedad devuelve el contenido HTML interno del elemento.Este enfoque se puede aplicar para agregar datos a la imagen y el botón incluidos en el "div"Elemento en el botón Haga clic.

Sintaxis

elemento.innerhtml

En la sintaxis dada:

• "elemento"Se refiere al elemento al que se devolverá el contenido HTML.

Ejemplo

Echemos un vistazo a las siguientes líneas de código:

Haga clic para agregar datos

En el código anterior:

• Especifica el "div"Elemento con el especificado"identificación".
• Después de eso, incluya una imagen en el elemento div.
• Además, cree un botón dentro del elemento Div que tenga un adjunto "al hacer clic"Redirección de eventos a la función appendData ().

Pase a la parte JavaScript del código:

En la parte JS del código, siga los pasos establecidos a continuación:

• Declarar una función llamada "appendData ()".
• En su definición, acceda al "div"Elemento de su ID usando el"documento.getElementById ()" método.
• Finalmente, aplique el "innerhtml"Propiedad para agregar el mensaje establecido junto con la imagen incluida y el botón creado en el"div".

Producción

Se puede observar en la salida anterior que el mensaje establecido se adjunta con la imagen en el botón Haga clic.

Enfoque 2: Agregar datos a DIV en JavaScript utilizando el método InsertAdJacenthTML ()

El "insertadJacenthtml ()"El método inserta datos HTML en la posición especificada.Este método se puede utilizar para agregar los datos al final del "div"Al seleccionar una opción específica.

Sintaxis

elemento.insertadjacenthtml (posición, html)

En la sintaxis anterior:

• "posición"Se refiere a la posición relativa al elemento.
• "html"Señala el HTML para ser insertado.

Ejemplo

Eche un vistazo al siguiente fragmento de código:

¿Es JavaScript un lenguaje de programación??

Sí
No

En el código HTML anterior:

• Repita los pasos discutidos para incluir el "div"Elemento tiene el especificado"identificación".
• Además, incluya el encabezado especificado en el "

  " etiqueta.

• Después de eso, incluya dos "radioBotones con uno que invoca la función appendData (). Esto dará como resultado agregar los datos solo al seleccionar la opción "Sí".

Pase a la parte JavaScript del código:

En el código JS anterior, siga estos pasos:

• Declarar una función llamada "appendData ()".
• En su definición, acceda al "div"Elemento de manera similar usa el"documento.getElementById ()" método.
• Por último, aplique el "insertadJacenthtml ()"Método especificando el"posición"Como su primer parámetro para agregar los datos especificados. En este escenario, los datos se agregarán al final.

Producción

En la salida anterior, es evidente que el "éxito"El mensaje se adjunta solo al hacer clic en la opción"Sí".

Enfoque 3: Agregar datos a Div en JavaScript utilizando el método appendChild ()

El "añadir Niño()El método "agrega un elemento de nodo como el último hijo del elemento. Este enfoque se puede utilizar para agregar los datos de manera similar al final al hacer clic en el botón.

Sintaxis

elemento.AppendChild (nodo)

En la sintaxis dada:

• "nodo"Indica que el nodo se adjuntará.

Nota al margen: Un método adicional "createTextNode ()"También se aplicará en el siguiente ejemplo. Simplemente se aplica para crear un nodo de texto.

Ejemplo

Sigamos el ejemplo de abajo a continuación paso a paso:

Javascript

Haga clic para agregar datos

En el código HTML anterior:

• Recuerde los enfoques discutidos para incluir el "div"Elemento tiene el especificado"identificación"Y un encabezado.
• Del mismo modo, incluya un botón con el "al hacer clic"Evento adjunto que redirigirá a la función appendData ().

Sigamos la parte de JavaScript establecida del código:

En esta parte del código, realice los siguientes pasos:

• Defina una función llamada "appendData ()".
• En su definición, de manera similar, accede al "div"Elemento como se discutió.
• En el siguiente paso, aplique el "createTextNode ()Método "para crear el nodo de texto especificado.
• Finalmente, agregue el nodo de texto creado al final del "div".

Producción

En la salida, es evidente que el párrafo resultante se agrega al "div"Sobre el clic del botón.

Enfoque 4: Agregar datos a Div en JavaScript utilizando el enfoque jQuery

El "jQuery"Se puede utilizar el enfoque para acceder al"div"Elemento directamente y agregue un encabezado en él (div) sobre el botón Haga clic.

Ejemplo

Sigamos el ejemplo de abajo a continuación paso a paso:

El contenido de este sitio es:

Haga clic para agregar datos

En el código anterior, siga los pasos establecidos a continuación:

• Incluya la biblioteca jQuery para aplicar sus métodos.
• Revive los pasos para especificar el "div"Elemento con el especificado"identificación".
• Dentro de "div", Incluyen el encabezado declarado y un"botón" con un "al hacer clic"Evento invocar la función appendData ().

Continuemos a la parte de JavaScript del código:

En la parte JS anterior del código, realice los siguientes pasos:

• Defina una función llamada "appendData ()".
• En su definición, acceda al elemento div directamente por su "identificación".
• Después de eso, aplique el "adjuntar()"Método para el acceso"div"E incluye el encabezado declarado en él.

Producción

En la salida, el clic del botón conduce a agregar el encabezado resultante en el "div".

Este artículo demostró los enfoques para agregar datos a Div en JavaScript.

Conclusión

El "innerhtml"Propiedad, la"insertadJacenthtml ()"Método, el"añadir Niño()"Método o el"jQueryEl enfoque se puede utilizar para agregar datos a Div en JavaScript. La propiedad innerhtml se puede utilizar para agregar los datos a la imagen incluida y un botón en el "div"Elemento en el botón Haga clic. El método InsertAdJacenthtml () se puede aplicar para agregar los datos con respecto a la posición especificada como su parámetro. El método appendChild () en combinación con el "createTextNode ()El método se puede utilizar para crear primero un nodo de texto y luego agregarlo al final del DIV. El enfoque jQuery se puede utilizar para obtener el elemento div directamente y agregar un encabezado en él al hacer clic en el botón. Este blog explicó a los datos de agregar a Div en JavaScript.