隐藏具有相同类的所有元素，然后添加具有相同类Javascript的元素

Question

使用javascript或jquery，我如何解决这样一种情况：我需要首先用类.manifest隐藏所有元素，然后在隐藏其余元素后用类.element向DOM添加一个元素。这显然很困难，因为javascript的性质，所以即使是一个变通方法对我来说也是完全可以接受的

基本上我试过

var rows = document.getElementsByClassName('manifest');
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}

然后在稍后的同一脚本中附加一个类为.manifest的元素，但这不起作用，该新元素也被隐藏。我理解为什么会这样，这是有道理的。我只是无法推理出一种方法来让它发挥作用。

Answer 1

1. 找到要附加元素的ref节点
2. 隐藏所有清单节点
3. 将新节点追加到父节点内部
4. 附加清单节点

// get ref for appending
const container = document.getElementsByClassName('manifest')[0].parentNode;
// hide all elements with classname manifest
Array.from(document.getElementsByClassName('manifest')).forEach(x => x.style.display = 'none')
// add new node to the DOM
const node = document.createElement('div');
node.className = 'element';
node.textContent = 'new element'
container.appendChild(node);
// add manifest node to the DOM
const manifestNode = document.createElement('div');
manifestNode.className = 'manifest';
manifestNode.textContent = 'manifest'
container.appendChild(manifestNode);

<div class="parent">
<div class="manifest">manifest</div>
<div class="manifest">manifest</div>
<div class="manifest">manifest</div>
</div>

Answer 2

将所有.manifest元素放在一个集合中并在它们上循环，在迭代时隐藏每个元素(使用CSS类而不是内联CSS作为最佳实践(。然后，只需显示.element项，并在循环完成时创建新的manifest元素。

而且，不要使用.getElementsByClassName()，这通常会影响性能，但在这种情况下，这是问题的根源。CCD_ 8返回"0"；"活动节点列表"；，它在创建时跟踪所有匹配的元素，并在DOM从那时起发生更改时跟踪这些元素。因为您稍后将添加一个新元素，但该新元素与活动节点列表包含的类(manifest(相同，因此它是该节点列表的一部分，如果您在该列表上循环并隐藏所有元素，则该新元素将是其中的一部分。从下面的代码中可以看到，无论您单击按钮多少次(并在manifest类项上循环(，新创建的节点不会消失，因为我们在这里没有使用活动节点列表——CCD_；静态节点列表"；。

document.querySelector("button").addEventListener("click", function(event){
// Get all the .manifest items and loop over them
document.querySelectorAll(".manifest").forEach(function(item){
item.classList.add("hidden"); // Hide the item
});
document.querySelector(".element").classList.remove("hidden"); // Show this item

// Now append a new manifest element that will be shown
let manifest = document.createElement("div");
manifest.textContent = "Dynamically added manifest element";
document.querySelector("div").appendChild(manifest);
});

.hidden { display:none; }

<div>
<div class="manifest">Manifest Element</div>
<div class="manifest">Manifest Element</div>
<div class="manifest">Manifest Element</div>
<div class="manifest">Manifest Element</div>
<div class="manifest">Manifest Element</div> 
<div class="element hidden">Elment Element</div>
</div>
<button>Go!</button>