As funções abaixo, da biblioteca jQuery, podem ser utilizadas para informar com mais precisão aonde será incluido um elemento, dentro de outro já existente. São elas:
A função append inclui o elemento na última posição dentro do elemento alvo que é o elemento selecionado para incluir o elemento criado. Faça o exercício do exemplo e observe a última li, não esquecer de clicar antes no botão Manipular Dom. Nessa página o exemplo que funciona ao clicar em manipular dom (botão amarelo no top) é da última função clone.
No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").append("<li>Dentro e na última posição</li>");
});
});
Essa função também inclui elementos dentro da árvore, mas dentro do elemento alvo na primeira posição. Clicar antes no botão Manipular Dom
No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").prepend("<li>Dentro e na primeira posição</li>");
});
});
Aqui o elemento criado é incluido fora do elemento alvo, após o término deste elemento, nesse caso depois de </ul>. Essas funções, diferentemente de html, text, que apenas alteram o conteúdo, cada vez que houver um clique, o elemento será adicionado novamente naquela posição. Experimente clicar no botão Manipular Dom, várias vezes seguidas.
No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").after("<h2>Fora e Depois do Elemento alvo</h2>");
});
});
A função before inclui o elemento criado, Fora e Antes do Elemento Alvo.
No javScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").before("<h2>Fora e antes do Elemento alvo</h2>");
});
});
No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").wrap("<p></p>");
});
});
Essa função faz uma cópia do elemento. Após a cópia pode-se adicioná-la na ul, podendo ser usada as funções append, prepend. Clique duas vezes e veja o resultado. Cada clique dobra o número de li. Nessa página são seis. Com um clique passa para doze e assim sucessivamente.
No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("ul").append($("li").clone());
});
});