El innerhtml se puede utilizar para escribir el documento HTML dinámicamente. Se implementa principalmente para generar documentos HTML dinámicos, incluidos formularios de comentarios, formularios de registro, enlaces y muchos más. Además, también puede reemplazar el Innerhtml dentro de un DIV con la ayuda de jQuery. Para hacerlo, el ".html ()Se utiliza la función. Cuando hace clic en el botón una vez que el sitio web se haya cargado, el contenido dentro del DIV se modificará con el contenido de la función HTML ().

Esta redacción demostrará reemplazar el interno de un div utilizando jQuery.

Cómo reemplazar innerhtml de un div usando jQuery?

Para reemplazar el interno de un contenedor DIV que utiliza jQuery, siga el procedimiento establecido a continuación.

Paso 1: Crea un contenedor principal "Div"

Inicialmente, cree el contenedor principal "Div" utilizando el "Elemento "y agregue una ID dentro de la etiqueta de apertura" div "con un nombre particular.

Paso 2: Agregar encabezados

A continuación, use cualquier etiqueta de encabezado de "H1" a "H6"Para agregar un rumbo a una página HTML. Por ejemplo, hemos utilizado "H1"Para el encabezado principal y"H2"Para el segundo encabezado. También puede definir un estilo en línea dentro de la etiqueta de encabezado.

Paso 3: Haz otro contenedor Div

Después de eso, haga otro contenedor Div siguiendo el mismo método en el paso anterior.

Paso 4: crear un botón

Luego, agregue un botón con la ayuda del "" elemento. Además, agregue un "clase"Atributo dentro de la etiqueta de apertura de div y asigna dos o más nombres de clases a este atributo. El "tipoEl atributo se utiliza para especificar el tipo de elemento. Luego, incruste el texto entre el "botónEl elemento para mostrar en el botón:

Linuxhint Ltd UK

Primer contenido sin ningún cambio

La salida del bloque de código anterior se indica a continuación:

Paso 3: Aplicar CSS en el contenedor "Div"

Acceda al segundo "div"Contenedor con la ayuda del nombre de la clase".Segundo Div":

.Segundo div
Text-Align: Center;

Después de acceder al contenedor Div, aplique el "texto alineado"Propiedad de CSS que se utiliza para establecer la alineación del texto.

Producción

Paso 4: Inserte la biblioteca jQuery

Agregaremos la biblioteca jQuery insertando el siguiente enlace dentro de la etiqueta entre el elemento head del archivo HTML:

Paso 5: Reemplace InnerHTML de Div

En el ""Etiqueta, agregue el siguiente código:

En el fragmento de código anterior:

• • Definir el "listo()Función "que solo se ejecutará una vez que el modelo de objeto de documento de página (DOM) esté listo para que el código JavaScript se ejecute.
  • Hacer una función para el elemento de botón para realizar la acción cuando el usuario lo presenta.
  • Ahora el "&(selector).html ()La función se utiliza para reemplazar el interno de divir. Para hacerlo, agregue los datos dentro del "()" para reemplazar.

Se puede observar que el InnerHTML del DIV se ha cambiado cuando se hace clic en el botón:

Has aprendido sobre la reemplazo del interno de un div usando jQuery.

Conclusión

Para reemplazar el interno de un DIV usando jQuery, primero, inserte un enlace de la biblioteca jQuery en la etiqueta de script con la ayuda del "SRC" atributo. Entonces el "html ()"La función se usa como"&(selector).html". Para hacerlo, el "$ ("#First-Div").html"Se utiliza en este escenario. Este artículo explicó el método para reemplazar el interno de un contenedor Div utilizando jQuery.