javascript - 如何使用 Javascript 和 Dom 克隆元素并在多个地方使用它

Question

我创建了一个链接节点。我希望能够克隆它并在不同的地方多次使用该副本。我可以这样做吗？这是我的 javascript 代码:

    var lank = document.createElement("a"); //Skapa en länk som heter lank
lank.setAttribute("class" , "visa");
lank.setAttribute("href" , "#");
var lankTN = document.createTextNode("Läs mer"); // Skapa en textnod som heter lankTN
lank.appendChild(lankTN); //Sätt in lankTN i lank

//Gömma texterna då sidan laddas och placera in länkar med texten Läs mer
window.onload = function uppstart(){
var texterna = document.getElementsByClassName("show");
for (var i = 0; i<texterna.length; i++){
texterna[i].style.visibility = "hidden";
document.getElementsByClassName("post")[i].appendChild(lank);
    }

}

Answer 1

是的，您可以使用cloneNode克隆节点。因此，如果 lank 是您想要克隆的内容:

var clone = lank.cloneNode(true);

该标志用于确定是否克隆其子级。通常你愿意。

我猜您想在这一行中执行此操作:

document.getElementsByClassName("post")[i].appendChild(lank);

...看起来像这样:

document.getElementsByClassName("post")[i].appendChild(lank.cloneNode(true));

<小时/>

旁注:您不必使用setAttribute来设置类和href，您可以使用反射的属性:

lank.className = "visa";
lank.href = "#";

这里是more DOM specs这可能会令人感兴趣，并且 HTML5 spec现在还包括一些 DOM 内容。