jQuery添加元素

Una parte molto importante di jQuery è la capacità di manipolare il DOM.

jQuery fornisce metodi efficaci per aggiungere nuovi elementi HTML.

In questa sezione, spiegheremo come aggiungere nuovi elementi/contenuti HTML al DOM.

jQuery aggiungere nuovo contenuto HTML

Con jQuery, possiamo facilmente aggiungere nuovi elementi HTML.

Abbiamo i seguenti metodi jQuery per aggiungere nuovo contenuto:

• append()

• prepend()

• after()

• before()

• wrap()

Vi mostrerò come utilizzare ciascun metodo.

Metodo jQuery append()

jQuery append()Il metodo inserisce il contenuto specificato alla fine di ogni elemento selezionato (come ultimo figlio).

Esempio seguente aggiunge alcuni contenuti di testo a tutti i paragrafi:

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

Esempio seguente aggiunge HTML a tutti i paragrafi:

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

Metodo jQuery prepend()

jQuery prepend()Il metodo inserisce il contenuto specificato all'inizio di ogni elemento selezionato (come primo figlio).

Esempio seguente aggiunge alcuni contenuti di testo prima di tutti i paragrafi:

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

Esempio seguente aggiunge HTML prima di tutti i paragrafi:

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

Aggiungere più elementi utilizzando append() e prepend()

Nell'esempio sopra, abbiamo inserito solo alcuni testi/HTML all'inizio/fine dell'elemento HTML selezionato.

Ma,append()eprepend()I metodi possono accettare un numero infinito di nuovi elementi come parametri.

È possibile generare nuovi elementi utilizzando gli elementi HTML (come nell'esempio sopra), gli elementi DOM o gli oggetti jQuery.

Nell'esempio seguente, utilizziamo gli elementi HTML, gli elementi DOM e gli oggetti jQuery per creare diversi nuovi elementi:

function appendText() {
　　let　x　=　"<p>示例文本.</p>";　　//　用HTML创建元素　　
　　let　y　=　$("<p></p>").text("示例文本.");　　//　用jQuery创建
　　let　z　=　document.createElement("p");//　用DOM创建
　　z.innerHTML　=　"示例文本.";
　　$("body").append(x, y, z); //Aggiungere nuovi elementi　
}

Metodo jQuery after()

jQuery after()Il metodo inserisce il contenuto specificato dopo l'elemento selezionato.

Esempio seguente inserisce contenuti dopo ogni paragrafo:

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

Metodo jQuery before()

jQuery before()Il metodo inserisce il contenuto specificato prima dell'elemento selezionato.

Esempio seguente inserisce contenuti prima di ogni paragrafo:

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

Aggiungere più elementi utilizzando after() e before()

Allo stesso modo,after()ebefore()I metodi possono accettare un numero infinito di nuovi elementi come parametri.

È possibile generare nuovi elementi utilizzando gli elementi HTML (come nell'esempio sopra), gli elementi DOM o gli oggetti jQuery.

Nell'esempio seguente, utilizziamo gli elementi HTML, gli elementi DOM e gli oggetti jQuery per creare diversi nuovi elementi:

function afterText() {
　　let　x　=　"<p>示例文本.</p>";　　//　用HTML创建元素　　
　　let　y　=　$("<p></p>").text("示例文本.");　　//　用jQuery创建
　　let　z　=　document.createElement("p");//　用DOM创建
　　z.innerHTML　=　"示例文本.";
　$("h1").after(x,　y,　z);　　//　在<h1>之后插入新元素
}

jQuery wrap()方法

jQuery wrap()方法将指定的HTML结构包裹在每个选定的元素前后。

下面的示例将DIV元素包裹在每个<p>元素前后：

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

jQuery HTML参考

有关完整的HTML方法参考，请访问我们的jQuery HTML / CSS参考.