jQuery append () vs appendChild ()

95

Aqui está um exemplo de código:

function addTextNode(){
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    $("#p1").append("HI");
}
<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
</div>

Qual é a diferença entre append()e appendChild()?
Algum cenário em tempo real?

user2067567
fonte
Um é um método jQuery, o outro é um método JS nativo, ambos fazem praticamente a mesma coisa, mas append () aceita vários elementos.
adeneo de
A parte inferior está usando uma biblioteca (por exemplo, o jQuery comumente referenciado), a parte superior está usando métodos DOM "nativos" para anexar o elemento.
Qantas 94 Heavy de

Respostas:

104

A principal diferença é que appendChildé um método DOM e appendé um método jQuery. O segundo usa o primeiro como você pode ver no código-fonte do jQuery

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},

Se estiver usando a biblioteca jQuery em seu projeto, você estará seguro sempre usando appendao adicionar elementos à página.

Claudio Redi
fonte
Você sabe por que append é "seguro" e appendChild não é? O que domManip faz?
Rob Fox,
2
@RobFox: por safe, quero dizer que, se você estiver usando jquery, é seguro usar sempre append (não há situação em que appendchild de DOM seja preferido). Em relação ao domManip, parece que o objetivo principal é usar DOM DocumentFragments. Aqui você tem uma descrição do método e aqui você tem a palavra oficial de John Resig sobre as motivações por trás do uso de fragmentos
Claudio Redi
3
o javascript também tem um ParentNode.append()agora. verifique a resposta de @SagarV para obter mais informações.
Jo E.
Eu ia dizer a mesma coisa que @JoE. : consulte ParentNode.append () .
Lonnie Best
46

Não mais

agora append é um método em JavaScript

Documentação MDN sobre o método anexar

Citando MDN

O ParentNode.appendmétodo insere um conjunto de objetos Node ou DOMStringobjetos após o último filho do ParentNode. DOMStringos objetos são inseridos como nós de texto equivalentes.

Não é compatível com IE e Edge, mas é compatível com Chrome (54+), Firefox (49+) e Opera (39+).

O append do JavaScript é semelhante ao append do jQuery.

Você pode passar vários argumentos.

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);
<div id="div1"></div>

Sagar V
fonte
3
MDN não informa o que está agora em javascript, a especificação ES sim
Raimonds
17

append é um método jQuery para anexar algum conteúdo ou HTML a um elemento.

$('#example').append('Some text or HTML');

appendChild é um método DOM puro para adicionar um elemento filho.

document.getElementById('example').appendChild(newElement);
Fenton
fonte
9

Sei que esta é uma pergunta antiga e respondida, e não estou procurando votos, apenas gostaria de acrescentar algo a mais que acho que pode ajudar os novatos.

sim appendChildé um DOMmétodo e é um método appendJQuery, mas praticamente a principal diferença é que appendChildleva um nó como parâmetro com isso quero dizer se você deseja adicionar um parágrafo vazio ao DOM, você precisa criar esse pelemento primeiro

var p = document.createElement('p')

então você pode adicioná-lo ao DOM, enquanto o JQuery appendcria esse nó para você e o adiciona ao DOM imediatamente, seja um elemento de texto ou um elemento html ou uma combinação!

$('p').append('<span> I have been appended </span>');

Kapreski
fonte
5

appendChildé uma função DOM vanilla-js .

append é uma função jQuery.

Cada um deles tem suas próprias peculiaridades.

Naftali também conhecido como Neal
fonte
0

appendChildé um método javascript puro onde as appendé um método jQuery .

Krishna
fonte
0

O método JavaScript appendchild pode ser usado para anexar um item a outro elemento. O elemento jQuery Append faz o mesmo trabalho, mas certamente em menos número de linhas:

Vamos dar um exemplo para adicionar um item a uma lista:

a) Com JavaScript

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);  

b) Com jQuery

$("#myList").append("<li>jQuery</li>")
Diana J.
fonte