Question

在这里，我为图标创建一个span元素，然后添加一个类来隐藏它（直到悬停为止）。对于第二个跨度，我将执行同样的操作，以保留工具提示并添加CSS样式。

然后，我遍历作为单元格列的shipCell，并附加btnSpan和tipSpan。同时使用.inerHTML添加图标（剪贴板），并使用tipSpan将文本“ Copy ShipID”添加到.innerText。

var btnSpan = document.createElement("span");
    btnSpan.classList.add('quickLink');  // Add class to all quickLinks
var tipSpan = document.createElement("span");
    tipSpan.classList.add('tooltip');    // Add class to all tooltips

for(var i=0;i<shipCell.length;i++){
        btnSpan.innerHTML = '&#128203;';
        shipCell[i].appendChild(btnSpan.cloneNode(true));  //add button to each cell

        tipSpan.classList.add('copytip');  //add class for copy buttons specifically
        tipSpan.innerText = 'Copy ShipID';
        shipCell[i].appendChild(tipSpan.cloneNode(true));  //add tool tip to each cell");
    };

这一切都应按其应有的方式进行（特别是在学习了cloneNode(true)之后，它可以附加到每个单元格而不仅仅是第一个单元格。

我的问题是，为我使用过.innerHTML的东西创建文本节点会更明智吗？如果是这样，怎么办？因为我尝试创建文本节点并将其附加到循环中，但是每次都会添加一个新副本，所以第二个单元格工具提示显示“ Copy ShipIDCopy ShipID”（是，两次）

Answer 1

好吧，尽管您现有的代码并不正确，但是for循环中的大多数代码都是不必要的，可以缩减为：

var btnSpan = document.createElement("span");
btnSpan.classList.add('quickLink');  // Add class to all quickLinks
btnSpan.innerHTML = '&#128203;';     // Moved this out from loop

var tipSpan = document.createElement("span");
tipSpan.classList.add('tooltip');    // Add class to all tooltips
tipSpan.innerText = 'Copy ShipID';   // Moved this out from loop

for (var i = 0; i < shipCell.length; i++){
    shipCell[i].appendChild(btnSpan.cloneNode(true));  //add button to each cell
    shipCell[i].appendChild(tipSpan.cloneNode(true));  //add tool tip to each cell");
};

由于使用.cloneNode(true)，因此您还将克隆其内部的所有子节点。意思是，您不必继续分配.innerHTML和.innerText，因为通过在true中使用.cloneNode()，它们也将被克隆。

仅当使用.cloneNode()且没有true参数时，才需要重新分配它们。但是，在这种情况下，您现有的代码将需要进行一些细微的调整。

var btnSpan = document.createElement("span");
btnSpan.classList.add('quickLink');  // Add class to all quickLinks

var tipSpan = document.createElement("span");
tipSpan.classList.add('tooltip');    // Add class to all tooltips

var btnSpanClone,
    tipSpanClone;

for (var i = 0; i < shipCell.length; i++){
    btnSpanClone = btnSpan.cloneNode();  // New btnSpan element without childNodes
    tipSpanClone = tipSpan.cloneNode();  // New tipSpan element without childNodes

    btnSpanClone.innerHTML = '&#128203;';
    tipSpanClone.innerText = 'Copy ShipID';

    shipCell[i].appendChild(btnSpanClone);
    shipCell[i].appendChild(tipSpanClone);
};

关于使用.createTextNode()是否更聪明的问题，在此特定情况下没有区别，因为您的btnSpan和tipSpan上没有其他可添加的内容。如果有的话，最好使用它来提高代码的组织性和可读性。

最重要的是使任何人都容易理解您的代码。

因此，如果您认为使用.createTextNode()可以使代码更易读和易于理解，请使用它。如果没有，那就不要。

如果您在这里谈论代码性能，则可以使用jsPerf或其他一些JS基准测试工具自己比较两种实现。性能差异很可能很小，可以忽略。

在for循环中附加子文本的最佳做法

1 个答案: