JavaScript: Copy document DOM without reference - Stack Overflow

admin管理员组

文章数量:1313276

Is it possible to copy the document DOM (or a part of it) without reference?

For example:

BodyCopy = document.body;
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

Update:

Ok, clondeNode() seems first to work, but if I do

BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

// Show edited copy
document.body = BodyCopy;

document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

it will not work as I expect. See JSFiddle.

Is it possible to copy the document DOM (or a part of it) without reference?

For example:

BodyCopy = document.body;
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

Update:

Ok, clondeNode() seems first to work, but if I do

BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

// Show edited copy
document.body = BodyCopy;

document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

it will not work as I expect. See JSFiddle.

• javascript
• dom

Share Improve this question Follow edited Feb 2, 2016 at 17:48 Hativ asked Feb 2, 2016 at 17:32 HativHativ 1,53011 gold badge1616 silver badges2424 bronze badges 2

• Are you going to append cloned node in dom, or replace existing, or just work with it in js? – Viktor Kukurba Commented Feb 2, 2016 at 17:46
• I will clone it, edit the cloned one and replace it multiple times. One copy should hold the original, one copy is for editing and the real document (document.body) should contain what's should be seen by user. – Hativ Commented Feb 2, 2016 at 17:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You're not copying the DOM anywhere, you're assigning document.body to a variable called BodyCopy.

You need to use cloneNode() on the assignment:

BodyCopy = document.body.cloneNode(true);

---

var BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// Now outputs <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// Now outputs <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

jsFiddle Demo

BodyCopy = document.body.cloneNode(true);
// ...
document.body = BodyCopy;

If you want to replace a node use parent.replaceChild(newChild, oldChild) or child.replaceWith(newChild).

let rootNode = document.documentElement;
let currentBody = document.body;
rootNode.replaceChild(BodyCopy, currentBody);

This how the body setter function should be implemented according to the html spec anyway.

If you want to keep the copy independent of the new content you'll have to clone it again before replacing the old one;

Manipulating innerHTML should be avoided where possible since it has to round-trip the nodes through the HTML serializer and parser.

You need to clone the node before performing modifications:

BodyCopy = document.body.cloneNode(true);

Now you have a copy instead of a reference.

EDIT

If you want to replace the old document.body with the new BodyCopy, you should modify its content and not its reference:

document.body.innerHTML = BodyCopy.innerHtml;

本文标签： JavaScript Copy document DOM without referenceStack Overflow