javascript - 创建元素时使用 insertBefore 和appendChild 时出错

Question

尝试将按钮附加到 body 标记的顶部和底部，但它仅执行两者中最后一个的操作。我在这里遗漏了一些明显的东西吗？

var msg_node = document.createElement("a");
msg_node.setAttribute("onclick", "collapseAll()");
msg_node.setAttribute("href", "javascript:void(0)");
msg_node.setAttribute("class", "kc_button");
var msg_textnode = document.createTextNode('COLLAPSE ALL');
msg_node.appendChild(msg_textnode);
document.getElementsByTagName('body')[0].appendChild(msg_node);  // supposed to make button
document.body.insertBefore(msg_node, document.body.children[0]); // makes only this button

Answer 1

在第二次追加之前克隆节点:

var msg_node = document.createElement("a");
msg_node.setAttribute("onclick", "collapseAll()");
msg_node.setAttribute("href", "javascript:void(0)");
msg_node.setAttribute("class", "kc_button");
var msg_textnode = document.createTextNode('COLLAPSE ALL');
msg_node.appendChild(msg_textnode);
document.getElementsByTagName('body')[0].appendChild(msg_node);  // supposed to make button
document.body.insertBefore(msg_node.cloneNode(true), document.body.children[0]); // makes only this button