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.
Share Improve this question edited Feb 2, 2016 at 17:48 Hativ asked Feb 2, 2016 at 17:32 HativHativ 1,5301 gold badge16 silver badges24 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
3 Answers
Reset to default 5You'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
版权声明:本文标题:JavaScript: Copy document DOM without reference - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741949589a2406630.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论