我正在尝试为我的网站实现书签并测试它:
<html>
<head>
<title>test bookmark</title>
<script type='text/javascript' src='libs/bookmarks.js'></script>
</head>
<body>
<input type = "text" id = "txt_id" />
<input type = "button" value = "create bk" onclick = "createBookmark();" />
<input type = "button" value = "restore bk 0" onclick = "restoreBookmarkNumber(0);" />
</body>
</html>
书签.js:
function Bookmark(of_elem, name)
{
this.name = name;
this.of_elem = of_elem;
this.elems = new Array();
for (var i = 0; i < of_elem.children.length; i++)
this.elems.push(of_elem.children[i].cloneNode(true));
return this;
};
Bookmark.prototype.restore = function ()
{
while (this.of_elem.hasChildNodes())
this.of_elem.removeChild(this.of_elem.lastChild);
for (var i = 0; i < this.elems.length; i++)
this.of_elem.appendChild(this.elems[i].cloneNode(true));
};
var bookmarks = new Array();
function createBookmark()
{
var name = prompt("Enter bookmark name", "Bookmark " + bookmarks.length);
var bk = new Bookmark(document.body, name);
bookmarks.push(bk);
}
function restoreBookmarkNumber(num)
{
var bk = bookmarks[num];
if (bk)
bk.restore();
}
由于某些奇怪的原因，书签恢复后文本框和按钮之间的空格消失了，但我不明白为什么会这样。我清楚地克隆了所有元素，那么它还需要什么？ 
最佳答案
在你使用 children 而不是 childNodes 的地方(比如 Bookmark 构造函数)，你只处理 < strong>element children(因为这是 children 与 childNodes 的重点)。在整个过程中使用 childNodes 以确保您维护元素之间的文本节点，因为元素之间的文本节点可能很重要(例如，间距)。
你的原件，失去了间距:
function Bookmark(of_elem, name)
{
this.name = name;
this.of_elem = of_elem;
this.elems = new Array();
for (var i = 0; i < of_elem.children.length; i++)
this.elems.push(of_elem.children[i].cloneNode(true));
return this;
};
Bookmark.prototype.restore = function ()
{
while (this.of_elem.hasChildNodes())
this.of_elem.removeChild(this.of_elem.lastChild);
for (var i = 0; i < this.elems.length; i++)
this.of_elem.appendChild(this.elems[i].cloneNode(true));
};
var bookmarks = new Array();
function createBookmark()
{
var name = prompt("Enter bookmark name", "Bookmark " + bookmarks.length);
var bk = new Bookmark(document.body, name);
bookmarks.push(bk);
}
function restoreBookmarkNumber(num)
{
var bk = bookmarks[num];
if (bk)
bk.restore();
}<html>
<head>
<title>test bookmark</title>
<script type='text/javascript' src='libs/bookmarks.js'></script>
</head>
<body>
<input type = "text" id = "txt_id" />
<input type = "button" value = "create bk" onclick = "createBookmark();" />
<input type = "button" value = "restore bk 0" onclick = "restoreBookmarkNumber(0);" />
</body>
</html>更新为在 Bookmark 中使用 childNodes 而不是 children，这不会丢失间距:
function Bookmark(of_elem, name)
{
this.name = name;
this.of_elem = of_elem;
this.elems = new Array();
for (var i = 0; i < of_elem.childNodes.length; i++)
this.elems.push(of_elem.childNodes[i].cloneNode(true));
return this;
};
Bookmark.prototype.restore = function ()
{
while (this.of_elem.hasChildNodes())
this.of_elem.removeChild(this.of_elem.lastChild);
for (var i = 0; i < this.elems.length; i++)
this.of_elem.appendChild(this.elems[i].cloneNode(true));
};
var bookmarks = new Array();
function createBookmark()
{
var name = prompt("Enter bookmark name", "Bookmark " + bookmarks.length);
var bk = new Bookmark(document.body, name);
bookmarks.push(bk);
}
function restoreBookmarkNumber(num)
{
var bk = bookmarks[num];
if (bk)
bk.restore();
}<html>
<head>
<title>test bookmark</title>
<script type='text/javascript' src='libs/bookmarks.js'></script>
</head>
<body>
<input type = "text" id = "txt_id" />
<input type = "button" value = "create bk" onclick = "createBookmark();" />
<input type = "button" value = "restore bk 0" onclick = "restoreBookmarkNumber(0);" />
</body>
</html>关于javascript - 为什么恢复后的元素会失去彼此之间的偏移量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27622681/