Chèn phần tử div làm cha mẹ

Question

Tôi chỉ tự hỏi liệu điều sau đây có thể thực hiện hay không, giả sử chúng ta có phần tử dom và chúng ta muốn bọc phần tử này vào một div. Vì vậy, một div được chèn vào giữa phần tử và đó là phần tử cha. Sau đó, div trở thành cha mẹ mới của phần tử.

Nhưng để điều phức tạp, những nơi khác chúng tôi đã làm những việc như:

var testElement = document.getElementByID('testID') 

nơi testID là một đứa trẻ của nguyên tố này được warapped trong một div. Vì vậy, sau khi chúng tôi đã thực hiện chèn của chúng tôi sẽ testElement vẫn còn hợp lệ?

BTW: Tôi không sử dụng jquery.

Bất kỳ ý tưởng nào?

Cảm ơn,

AJ

Answer 1

bạn có thể sử dụng replaceChild^[docs]:

// `element` is the element you want to wrap 
var parent = element.parentNode; 
var wrapper = document.createElement('div'); 

// set the wrapper as child (instead of the element) 
parent.replaceChild(wrapper, element); 
// set element as child of wrapper 
wrapper.appendChild(element); 

chừng nào bạn không sử dụng innerHTML (mà phá hủy và tạo ra các yếu tố), refe các hàng rào đến các phần tử DOM hiện có không bị thay đổi.

Answer 2

Giả sử bạn đang làm thao tác bằng cách sử dụng phương pháp chuẩn DOM (và không innerHTML) sau đó - vâng.

Các yếu tố di chuyển không phá vỡ tham chiếu trực tiếp tới chúng.

(Nếu bạn đang sử dụng innerHTML, sau đó bạn sẽ phá hủy các nội dung của phần tử bạn đã thiết lập rằng tài sản trên và sau đó tạo ra nội dung mới)

Bạn có thể muốn một cái gì đó như:

var oldParent = document.getElementById('foo'); 
var oldChild = document.getElementById('bar'); 
var wrapper = document.createElement('div'); 
oldParent.appendChild(wrapper); 
wrapper.appendChild(oldChild); 

Answer 3

Trong JS tinh khiết bạn có thể thử một cái gì đó như thế này ...

var wrapper = document.createElement('div'); 
var myDiv = document.getElementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv); 

Answer 4

Dưới đây là một ví dụ khác, chỉ có các yếu tố mới kết thúc tốt đẹp xung quanh 'tất cả' của phần tử con của nó.

Bạn có thể thay đổi điều này khi cần thiết để nó quấn ở các phạm vi khác nhau. Không có nhiều bình luận về chủ đề cụ thể này, vì vậy hy vọng nó sẽ giúp ích cho mọi người!

var newChildNodes = document.body.childNodes; 
var newElement = document.createElement('div'); 

newElement.className = 'green_gradient'; 
newElement.id = 'content';   

for (var i = 0; i < newChildNodes.length;i++) { 
    newElement.appendChild(newChildNodes.item(i)); 
    newChildNodes.item(0).parentNode.insertBefore(newElement, newChildNodes.item(i)); 
} 

Bạn sẽ muốn sửa đổi phần 'document.body' của biến NewChildNodes thành bất kỳ phần tử gốc nào của phần tử mới của bạn. Trong ví dụ này, tôi đã chọn để chèn một trình bao bọc div. Bạn cũng sẽ muốn cập nhật loại phần tử và các giá trị id và className.