jQuery append () 대 appendChild ()

Question 1

다음은 몇 가지 샘플 코드입니다.

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()?
실시간 시나리오가 있습니까?

Question 2

주요 차이점은 appendChildDOM 메서드이고 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경우 페이지에 요소를 추가 할 때 항상 안전하게 사용할 수 있습니다 .

Question 3

더이상

이제 append는 JavaScript의 메소드입니다.

추가 방법에 대한 MDN 문서

MDN 인용

이 ParentNode.append메서드 DOMString는의 마지막 자식 뒤에 Node 개체 또는 개체 집합을 삽입 합니다 ParentNode. DOMString객체는 동등한 Text 노드로 삽입됩니다.

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>

스 니펫 확장

Question 4

append 요소에 일부 콘텐츠 또는 HTML을 추가하는 jQuery 메서드입니다.

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

appendChild 자식 요소를 추가하기위한 순수한 DOM 메서드입니다.

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

Question 5

나는 이것이 오래되고 대답 된 질문이라는 것을 알고 있으며 나는 투표를 찾고 있지 않습니다. 나는 새로운 이민자들에게 도움이 될 것이라고 생각하는 작은 것을 추가하고 싶습니다.

예 appendChild는 DOM방법이고 appendJQuery 방법이지만 실제로 중요한 차이점은 appendChild노드를 매개 변수로 사용한다는 것입니다. 즉, DOM에 빈 단락을 추가하려면 해당 p요소를 먼저 만들어야합니다.

var p = document.createElement('p')

그런 다음 DOM에 추가 할 수 있지만 JQuery는 append해당 노드를 생성하여 텍스트 요소 든 html 요소 든 조합이든 즉시 DOM에 추가합니다!

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

Question 6

appendChildDOM vanilla-js 함수입니다.

append jQuery 함수입니다.

그들은 각각 고유 한 특성이 있습니다.

Question 7

appendChild순수한입니다 자바 스크립트 와 같은 방법 appendA는 의 jQuery 방법은.

Question 8

자바 스크립트에 appendChild의 방법은 다른 요소에 항목을 추가하는 사용 될 수 있습니다. jQuery를 추가]의 요소는 동일한 작업을하지만 확실히 선 적은 수의 작업을 수행합니다

목록에 항목을 추가하는 예제를 살펴 보겠습니다.

a) 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);

b) jQuery 사용

$("#myList").append("<li>jQuery</li>")