Ось зразок коду:

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()?
Будь-які сценарії реального часу?

Основна відмінність полягає в тому, що 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додавання елементів на сторінку.

Більше не

зараз 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>

append є методом jQuery для додавання вмісту або HTML до елемента.

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

appendChild - це чисто DOM-метод для додавання дочірнього елемента.

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

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

yes 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>');

appendChildє функцією DOM vanilla-js .

append є функцією jQuery.

У кожного з них є свої химерності.

appendChild- це чистий метод javascript, де як appendі метод jQuery .

Метод 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>")