Hiểu chuỗi DOM cơ bản

Question

Tôi bắt đầu với JavaScript và DOM, cố gắng tránh xa jQuery và những thứ tương tự, ít nhất là trong một thời gian ngắn. Với ý nghĩ đó, hướng dẫn thường cung cấp một ví dụ như thế này:

h = document.createElement("h1"); 
t = document.createTextNode("Hello."); 
h.appendChild(t); 
document.body.appendChild(h); 

Trong một nỗ lực để sắp xếp này và tránh các biến, tôi bị xiềng xích thành công như sau:

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello.")); 

Trong khi làm việc này, tôi đã cố gắng để rút ngắn hoạt động thêm vào trước sau:

h = document.createElement("h1"); 
t = document.createTextNode("Put this on top."); 
h.appendChild(t); 
document.body.insertBefore(h,document.body.firstChild); 

như sau:

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild); 

Nhưng lần này nó không hoạt động như mong muốn: văn bản được đặt ở phần cuối của phần tử BODY, có được một phụ thêm thay vì một phần thêm.

Tôi tưởng tượng trường hợp đầu tiên thành công chỉ là một tiếng sáo, nhưng tôi không thể thấy có gì sai với thực hành chuỗi này.

Answer 1

Bạn có dấu ngoặc đơn ở những nơi không chính xác. dòng của bạn:

document.body.insertBefore(document.createElement("h1")) 
.appendChild(document.createTextNode("Put this on top."), document.body.firstChild); 

Làm thế nào nó nên là:

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")), document.body.firstChild); 

Bây giờ bạn hiểu tại sao điều này nói chung là một ý tưởng tồi để hợp nhất tất cả trong một dòng.

Ok, dòng cố định này sẽ không cung cấp cho bạn hành vi chính xác của mã của bạn 'có biến'. Điều này là do .appendChild trả về phần tử DOM con (<INPUT> trong trường hợp của bạn), không phải là phụ huynh (<H1> trong trường hợp của bạn). Nhưng bạn muốn sao cho tất cả các phần tử DOM <H1> được thêm vào đầu tài liệu. Để đạt được điều này trong một dòng bạn cần phải sử dụng tài sản .parentNode:

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")).parentNode, document.body.firstChild) 

Guys, xin vui lòng không sử dụng mã như vậy, điều này chỉ là cho mục đích giáo dục)))