Dołącz Vs appendChild JQuery

Question

Oto niektóre przykładowy kod:

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> 

Jaka jest różnica między append i appendChild.

Wszelkie scenariusze w czasie rzeczywistym?

PS: Może to głupie pytanie po prostu chcesz poznać dokładną różnicę

Answer 1

Główna różnica polega na tym, że appendChild jest metodą DOM, a append jest metodą jQuery. Drugi wykorzystuje pierwszy jak widać na jQuery kodu źródłowego

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

Jeśli używasz biblioteki jQuery nad projektem, będziesz bezpieczny zawsze przy użyciu append podczas dodawania elementów do strony.

Answer 2

appendChild jest DOM vanilla-js funkcja.

append jest funkcją jQuery.

Każda z nich ma swoje własne dziwactwa.

Answer 3

append to metoda jQuery do dołączania niektórych treści lub HTML do elementu.

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

appendChild to czysta metoda DOM dodawania elementu potomnego.

document.getElementById('example').appendChild(newElement); 

Answer 4

appendChild jest czystym JavaScript metodą, w której jako append jest jQuery metodą.

Answer 5

Wiem, że jest to stare i odpowiedział na pytanie i nie szukam głosów. Chcę tylko dodać małą rzecz, która moim zdaniem może pomóc nowo przybyłym.

tak appendChild to metoda DOM i append jest metoda JQuery ale praktycznie Podstawową różnicą jest to, że appendChild zajmuje węzeł jako parametr przez to mam na myśli, jeśli chcesz dodać paragraf pusty do DOM trzeba utworzyć ten p pierwszy element

var p = document.createElement('p')

następnie można go dodać do DOM natomiast JQuery append tworzy ten węzeł dla Ciebie i dodaje go do DOM od razu, czy jest to element tekstowy lub HTML elementem lub kombinacja!

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

Answer 6

Już

teraz dołączyć to metoda w JavaScript

MDN documentation on append method

Cytowanie MDN

Sposób ParentNode.append wstawia zestaw obiektów węzła lub DOMString obiekty po ostatnim dziecku ParentNode. DOMString obiekty są wstawiane jako równoważne węzły Tekst.

To nie jest obsługiwane przez IE i Edge, ale jest obsługiwane przez Chrome (54+), Firefox (49+) i Opera (39+).

Dodatek JavaScript jest podobny do dołączenia jQuery.

Możesz przekazywać wiele argumentów.

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

<div id="div1"></div>