jQuery append () против appendChild ()

100

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

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()?
Какие-нибудь сценарии в реальном времени?

user2067567
источник
Один - это метод jQuery, другой - собственный метод JS, они оба делают почти одно и то же, но append () принимает несколько элементов.
adeneo
Внизу используется библиотека (например, часто упоминаемый jQuery), в верхней части используются «собственные» методы DOM для добавления элемента.
Qantas 94 Heavy

Ответы:

106

Основное отличие состоит в том, что appendChildэто метод DOM и метод appendjQuery. Второй использует первый, как вы можете видеть в исходном коде 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при добавлении элементов на страницу.

Клаудио Реди
источник
Вы знаете, почему append «безопасно», а appendChild - нет? Что делает domManip?
Роб Фокс
2
@RobFox: безопасно, я хотел сказать, что если вы используете jquery, вы можете безопасно использовать всегда добавление (нет ситуации, когда предпочтение отдается добавлению DOM). Что касается domManip, похоже, основная цель - использовать DOM DocumentFragments. Здесь у вас есть описание метода, а здесь у вас есть официальное слово Джона Ресига о мотивах использования фрагментов
Клаудио Реди
4
javascript также имеет файл ParentNode.append()now. пожалуйста, проверьте ответ @SagarV для получения дополнительной информации.
Jo E.
Я собирался сказать то же самое, что и @JoE. : см. ParentNode.append () .
Лонни Бест,
47

Больше никогда

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

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

Цитирование 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>

Сагар V
источник
4
MDN не сообщает, что сейчас находится в javascript, в
Раймондс
18

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

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

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

document.getElementById('example').appendChild(newElement);
Фентон
источник
9

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

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

var p = document.createElement('p')

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

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

Капрески
источник
5

appendChildэто функция DOM vanilla-js .

append это функция jQuery.

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

Нафтали он же Нил
источник
0

appendChild- это чистый метод javascript, а appendтакже метод jQuery .

Кришна
источник
0

Метод appendchild в JavaScript можно использовать для добавления элемента к другому элементу. Элемент jQuery Append выполняет ту же работу, но с меньшим количеством строк:

Давайте рассмотрим пример добавления элемента в список:

а) С помощью 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);  

б) С jQuery

$("#myList").append("<li>jQuery</li>")
Диана Дж.
источник