jQuery append () vs appendChild()

вот пример кода:

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()?
Реальные сценарии?

62
append appendchild javascript jquery

6 ответов

главное отличие в том, что 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 при добавлении элементов на страницу.

70

уже нет

теперь append-это метод в JavaScript

документация MDN по методу добавления

цитируя MDN

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

это не поддерживается IE и Edge, но поддерживается Chrome (54+), Firefox (49+) и Опера(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>
19

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

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

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

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

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

да 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>');

6

appendChild является DOM ваниль-js

5

appendChild чисто в JavaScript метод где as append это jQuery метод.

-1