Append Vs AppendChild JQuery

Question

Вот некоторые примеры кода:

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> 

В чем разница между append и appendChild.

Любые реальные сценарии?

PS: Может быть глупый вопрос, просто хочу знать точную разницу

Answer 1

Главное отличие состоит в том, что appendChild является методом DOM, а append - это метод jQuery. Второй использует первый, как вы можете видеть на JQuery исходный код

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

Если вы используете библиотеку Jquery на ваш проект, вы будете в безопасности всегда использовать append при добавлении элементов страницы.

Answer 2

appendChild является DOM vanilla-js функции.

append является функцией jQuery.

У каждого из них свои собственные причуды.

Answer 3

append - метод jQuery для добавления некоторого содержимого или HTML в элемент.

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

appendChild - это чистый метод DOM для добавления дочернего элемента.

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

Answer 4

appendChild является чистым Javascript метод, где в качестве append является метод JQuery.

Answer 5

Я знаю, что это старый и ответивший вопрос, и я не ищу голоса. Я просто хочу добавить лишнюю мелочь, которая, я думаю, может помочь новичкам.

да appendChild является DOM метода и append является методом JQuery, но практически ключевым отличием является то, что appendChild занимает узел в качестве параметра, что я имею в виду, если вы хотите добавить пустой абзац в DOM вы должны создать эту p элемент первого

var p = document.createElement('p')

, то вы можете добавить его в DOM, тогда как JQuery append создает этот узел для вас, и добавляет его в DOM сразу же, будь то текстовый элемент или HTML элемент или сочетание!

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

Answer 6

больше не

Теперь не присоединять это метод в JavaScript

MDN documentation on append method

Цитирование MDN

Метод ParentNode.append вставляет набор объектов Node или DOMString объекты после последнего ребенка ParentNode. DOMString объекты вставляются как эквивалентные текстовые узлы.

Это не поддерживается IE и Edge, но поддерживается Chrome (54+), Firefox (49+) и Opera (39+).

Приложение JavaScript похоже на приложение jQuery.

Вы можете передать несколько аргументов.

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

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