appendChild + createElement

Question

những gì là sự khác biệt giữa

var div = document.createElement('div');//output -> [object HTMLDivElement] 

document.getElementById('container').appendChild(div); 

và

var div = '<div></div>'; 

document.getElementById('container').appendChild(div);//output -> <div></div> 

nên không được cả hai là như nhau? và nếu không, làm thế nào để tôi có được phiên bản thứ 2 để làm việc?

Answer 1

Sau đó là html thuần túy cho một phần tử trong khi đầu tiên là đối tượng. Đầu tiên, bạn cần appendChild trong khi sau này, bạn cần innerHTML.

không được giống nhau? và nếu không, làm thế nào để tôi có được phiên bản thứ 2 để hoạt động?

var div = '<div></div>'; 
document.getElementById('container').innerHTML = div; 

Answer 2

appendChild được mong đợi một yếu tố nên khi bạn gửi nó văn bản, nó không biết phải làm gì. Bạn có thể muốn xem xét sử dụng thư viện javascript để giảm bớt một số công việc đó, chẳng hạn như jQuery. Mã của bạn sẽ là:

$('#container').append('<div></div>'); 

Answer 3

appendChild thực sự mong đợi một HTMLDomNode của một số loại, chẳng hạn như một HTMLDivElement, và không phải là một chuỗi. Nó không biết làm thế nào để đối phó với một chuỗi. Bạn có thể làm

document.getElementById('container').innerHTML += div; 

nhưng tôi thực sự thích phiên bản đầu tiên; và tôi dựa nhiều hơn vào nó để hành xử giống nhau trên các trình duyệt.

Answer 4

Với công cụ JS/DOM của bạn, hãy gọi Element.appendChild với số string làm đối số gây ra nút Text mới sẽ được tạo sau đó được thêm.

Ví dụ đầu tiên của bạn tạo yếu tố <div>. Ví dụ thứ hai của bạn tạo ra một nút văn bản với <div></div> làm nội dung của nó.

ví dụ thứ hai của bạn là tương đương với:

var div = '<div></div>'; 

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div> 

Như Sarfraz Ahmed mentioned in his answer, bạn có thể làm công việc ví dụ thứ hai cách bạn muốn nó hoạt động bằng cách viết:

var div = '<div></div>'; 

document.getElementById('container').innerHTML = div; 

Answer 5

Giải pháp đơn giản nhất và hỗ trợ tất cả trình duyệt là:

var div = '<div></div>'; 
var parser = new DOMParser(); 
var myDiv = parser.parseFromString(html, "text/xml"); 

Một giải pháp khác có thể là:

var div = '<div></div>'; 
var tmpDiv = document.createElement('div'); 
    tmpDiv.innerHTML = div; 

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element 

Answer 6

Bạn cũng có thể sử dụng chúng để bổ sung/thêm vào trước một yếu tố để DOM tương ứng:

var elem = document.documentElement.appendChild(document.createElement(element)); 
var elem = document.documentElement.prepend(document.createElement(element)); 

và sử dụng biến elem để nhắm mục tiêu các phần tử (ví dụ):

elem.style.display = "block"; 
elem.style.remove(); 
elem.style.id = ...; 

v.v.