Question

我教自己编写本机javascript，我创建了这个函数来检查div是否有子节点，如果没有，那么它会创建一个带有＆＃39; card＆＃类的div 39;

当我传入一个参数时，该函数有效，但当我背靠背时，它会忽略第一个函数实例并仅输出第二个函数实例。有任何想法吗？

谢谢！

这是我的代码：

JavaScript的：

var dealerCards = document.querySelector('.dealer-cards');
var playerCards = document.querySelector('.player-cards');
var newDiv = document.createElement('div');

function cardCheck(a){  
    if (a.firstChild == null) {

        console.log(a.firstChild, a);

        newDiv.className = 'card';

        return a.appendChild(newDiv);

    }
}

cardCheck(dealerCards);
cardCheck(playerCards);

HTML：

<div class="dealer-box box">
    <h2>Dealer</h2>
    <div class="dealer-cards card-wrapper"></div>
</div>
<div class="player-box box">
    <h2>Player</h2>
    <div class="player-cards card-wrapper"></div>
</div>

http://jsbin.com/rehozu/1/edit?html,js

Answer 1

您必须在函数内创建新元素。如果要附加文档中已存在的元素，则该元素移动到其新父级，而不是克隆。

来自MDN documentation：

如果child是对文档中现有节点的引用，appendChild会将其从当前位置移动到新位置（即，不需要先从其父节点中删除节点将其附加到其他节点）。

这也意味着节点不能同时位于文档的两个点。因此，如果节点已经有父节点，则首先删除它，然后将其附加到新位置。

您可以使用Node.cloneNode制作节点的副本，然后将其添加到新父节点下。（请注意，使用cloneNode创建的副本不会自动保持同步。）

Answer 2

您需要克隆newDiv元素才能操作它。基本上你是在继续引用它并在第二次函数调用时使用已经粘贴的newDiv。

Check it out

javascript函数不能工作两次

2 个答案: