jQuery append() vs appendChild()

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()?
실시간 시나리오는?

가장 큰 차이점은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페이지에 요소를 추가할 때.

더 이상.

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

추가 방법에 대한 MDN 설명서

MDN 견적

그ParentNode.append메소드는 노드 개체 집합을 삽입합니다.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요소에 일부 내용 또는 HTML을 추가하는 jQuery 메서드입니다.

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

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

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

저는 이것이 오래되고 답이 있는 질문이라는 것을 알고 있고 저는 표를 찾고 있지 않습니다. 저는 단지 새로 온 사람들에게 도움이 될 것이라고 생각하는 작은 것을 추가하고 싶을 뿐입니다.

네.appendChild이다.DOM방법과appendJQuery 방법이지만 실질적으로 중요한 차이점은appendChild노드를 매개 변수로 사용합니다. 즉, DOM에 빈 단락을 추가하려면 노드를 생성해야 합니다.p원소 우선

var p = document.createElement('p')

그런 다음 DOM에 추가할 수 있지만 JQuery는append사용자를 위해 해당 노드를 생성하여 텍스트 요소, HTML 요소 또는 조합에 관계없이 DOM에 즉시 추가합니다!

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

appendChildDOM 바닐라-js 함수입니다.

appendjQuery 함수입니다.

그들은 각각 그들만의 독특한 점이 있습니다.

JavaScript appendchild 메서드를 사용하여 항목을 다른 요소에 추가할 수 있습니다.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>")

appendChild순수한 자바스크립트 방법인 반면에,appendjQuery 메서드입니다.

저는 여기에 혼동이 있다고 생각했기 때문에 그것을 명확히 하려고 합니다.

'append'와 'appendChild' 모두 네이티브 Javascript 기능으로 동시에 사용할 수 있습니다.

예:

let parent_div = document.querySelector('.hobbies');
let list_item = document.createElement('li');
list_item.style.color = 'red';
list_item.innerText = "Javascript added me here"

//running either one of these functions yield same result
const append_element = parent_div.append(list_item);
const append_child_element = parent_div.appendChild(list_item);

그러나 주요 차이점은 반환 값입니다.

예

console.log(append_element) //returns undefined

반면에.

console.log(append_child_element) // returns 'li' node

따라서 append_child 메서드의 반환 값은 변수에 저장하고 나중에 사용하는 데 사용할 수 있지만 append는 기본적으로 사용 및 던지기(익명) 함수입니다.

언급URL : https://stackoverflow.com/questions/15926325/jquery-append-vs-appendchild