Agregar elementos de jQuery

Una parte muy importante de jQuery es la capacidad de manipular el DOM.

jQuery ofrece métodos para agregar nuevos elementos HTML de manera efectiva.

En este capítulo, explicaremos cómo agregar nuevos elementos HTML al DOM./Contenido.

Agregar nuevo contenido HTML con jQuery

Con jQuery, podemos agregar nuevos elementos HTML fácilmente.

Tenemos los siguientes métodos jQuery para agregar nuevo contenido:

• append()

• prepend()

• after()

• before()

• wrap()

A continuación, le mostraré cómo usar cada uno de estos métodos.

Método jQuery append()

jQuery append()El método inserta el contenido especificado al final de cada elemento seleccionado (como último elemento hijo).

El siguiente ejemplo adjunta contenido de texto a todos los párrafos:

$("button").click(function(){
　　$("p").append("Hello world");
});

El siguiente ejemplo adjunta HTML a todos los párrafos:

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

Método jQuery prepend()

jQuery prepend()El método inserta el contenido especificado al inicio de cada elemento seleccionado (como primer elemento hijo).

El siguiente ejemplo agrega contenido de texto antes de todos los párrafos:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

El siguiente ejemplo agrega HTML antes de todos los párrafos:

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

Agregar varios elementos utilizando append() y prepend()

En el ejemplo anterior, solo insertamos en el inicio del elemento HTML seleccionado/Se insertó un texto al final/ HTML.

Pero,append()yprepend()Los métodos pueden tomar una cantidad ilimitada de nuevos elementos como parámetros.

Los nuevos elementos pueden generarse utilizando elementos HTML (como en el ejemplo anterior), elementos DOM o objetos jQuery.

En el siguiente ejemplo, utilizamos elementos HTML, elementos DOM y objetos jQuery para crear varios nuevos elementos:

function appendText() {
　　let x = "<p>Texto de ejemplo.<"/p>";　　//　Crear elementos con HTML　　
　　let y = $("<p></p>";　　//　Crear con jQuery
　　let z = document.createElement("p");//　Crear con DOM
　　z.innerHTML = "Texto de ejemplo.";
　　$("body").append(x, y, z);　　//Agregar nuevos elementos　
}

Método jQuery after()

jQuery after()El método inserta el contenido especificado después del elemento seleccionado.

El siguiente ejemplo inserta contenido después de cada párrafo:

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

Método jQuery before()

jQuery before()El método inserta el contenido especificado antes del elemento seleccionado.

El siguiente ejemplo inserta contenido antes de cada párrafo:

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

agregar varios elementos utilizando after() y before()

Del mismo modo,after()ybefore()Los métodos pueden tomar una cantidad ilimitada de nuevos elementos como parámetros.

Los nuevos elementos pueden generarse utilizando elementos HTML (como en el ejemplo anterior), elementos DOM o objetos jQuery.

En el siguiente ejemplo, utilizamos elementos HTML, elementos DOM y objetos jQuery para crear varios nuevos elementos:

function afterText() {
　　let x = "<p>Texto de ejemplo.<"/p>";　　//　Crear elementos con HTML　　
　　let y = $("<p></p>";　　//　Crear con jQuery
　　let z = document.createElement("p");//　Crear con DOM
　　z.innerHTML = "Texto de ejemplo.";
　$("h1").after(x, y, z);　　//　En <h1Insertar nuevos elementos después de >
}

Método wrap() de jQuery

jQuery wrap()El método envuelve la estructura HTML especificada antes y después de cada elemento seleccionado.

El siguiente ejemplo envuelve el elemento DIV en los elementos <p> antes y después de cada uno:

$("button").click(function(){
　　$("p").wrap("<div></div>"
});

Referencia HTML de jQuery

Para obtener referencias de métodos HTML completos, visite nuestraHTML de jQuery / Referencia CSS.