tutoriais mais recente desenvolvimento web
 

jQuery - Adicionar Elements

❮ Anterior Próxima Capítulo ❯

Com jQuery, é fácil adicionar novos elementos / conteúdo.

Adicionar conteúdo New HTML

Vamos olhar para quatro métodos jQuery que são usados ​​para adicionar novos conteúdos:

  • append() - conteúdo inserções no final dos elementos seleccionados
  • prepend() - conteúdo inserções no início dos elementos seleccionados
  • after() - Insere o conteúdo depois de os elementos selecionados
  • before() - conteúdo Inserções antes de os elementos selecionados

jQuery append() Método

O jQuery append() método insere conteúdo no final de elementos HTML selecionados.

Exemplo

$("p").append("Some appended text.");
Tente você mesmo "

jQuery prepend() Método

O jQuery prepend() método insere conteúdo no início dos elementos HTML selecionados.

Exemplo

$("p").prepend("Some prepended text.");
Tente você mesmo "

Adicionar vários novos elementos com append() e prepend()

Em ambos os exemplos acima, temos apenas inserido algum texto / HTML no início / fim dos elementos HTML selecionados.

No entanto, tanto o append() e prepend() métodos podem levar um número infinito de novos elementos como parâmetros. Os novos elementos podem ser gerados com texto / HTML (como fizemos nos exemplos acima), com jQuery, ou com o código de JavaScript e elementos DOM.

No exemplo a seguir, criamos vários elementos novos. Os elementos são criados com texto / HTML, jQuery e JavaScript / DOM. Em seguida, acrescentar os novos elementos para o texto com o append() método (isto teria trabalhado para prepend() também):

Exemplo

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Tente você mesmo "

jQuery after() e before() Métodos

O jQuery after() método insere conteúdo após a elementos HTML selecionados.

O jQuery before() método insere conteúdo antes de os elementos HTML selecionados.

Exemplo

$("img").after("Some text after");

$("img").before("Some text before");
Tente você mesmo "

Adicionar Elements vários novos Com after() e before()

Além disso, tanto o after() e before() métodos podem levar um número infinito de novos elementos como parâmetros. Os novos elementos podem ser gerados com texto / HTML (como fizemos no exemplo acima), com jQuery, ou com o código de JavaScript e elementos DOM.

No exemplo a seguir, criamos vários elementos novos. Os elementos são criados com texto / HTML, jQuery e JavaScript / DOM. Em seguida, inserir os novos elementos ao texto com o after() método (isto teria trabalhado para before() também):

Exemplo

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»

jQuery HTML Referência

Para uma visão completa de todos os métodos jQuery HTML, por favor, vá ao nosso jQuery HTML / CSS Referência .


❮ Anterior Próxima Capítulo ❯