如何用两个元素替换一个DOM元素-香草js

Question

我希望将一个DOM元素（一个） 替换为其他两个 元素（两个，三个）。 replaceChild()或replaceWith()方法对我不起作用。

<div class="one">
   <div class="two">...</div>
   <div class="three">...</div>
</div>

我该如何实现？

<div class="two">...</div.
<div class="three">...</div>

Answer 1

这是一种实现方法。有更好的方法。 这使用id（对于唯一元素和使用DOM操作更好）

这要求您除了/之外，还使用id标记代替类。

一些关键点，这假定父节点为1。 （您的代码不会显示）。这是删除节点的要求，您不能删除节点本身，只能删除子节点-因此必须指定要从哪个父节点中删除哪个子节点。

const one = document.getElementById('one');
const two = document.getElementById('two');
const three= document.getElementById('three');
const onesParent = one.parentNode;
onesParent.removeChild(one);
onesParent.appendChild(two);
onesParent.appendChild(three);

您使用类的替代方法是document.getElementByClassName（）;。但这仅获得该类的FIRST实例。充其量只是些小事。使用id来操纵单个div。