Добавить Vs AppendChild JQuery

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

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: Может быть, глупый вопрос просто хочет узнать точную разницу

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

Ответ 2

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

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

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

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

Ответ 3

Больше

now append - это метод в JavaScript

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

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

var p = document.createElement('p')

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

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

Ответ 6

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