无法在“节点”上执行“replaceChild”：需要 2 个参数，但只有 1 个存在

Question

我尝试了很多不同的方法来替换一个元素，但都无济于事。 .write 不好，innerHTML 只替换内容但我想替换整个元素。这种方法似乎是最简单的，但这次我不知道出了什么问题。当我按下按钮时，它给出了错误：

未捕获的类型错误：无法在“节点”上执行“replaceChild”：2 需要参数，但只有 1 个存在。

newChild 和 oldChild 不是两个参数吗？

HTML

    <div id="derp" onclick="replace()">
        <div>TODO write content</div>
    </div>

JavaScript

var oldChild = document.getElementById("derp");
var newChild = document.createElement("div");

function replace() {
oldChild.parentNode.replaceChild("newChild, oldChild.firstChild");
}

当 oldChild 被替换时，是否可以用这样的变量中的代码块替换它？

var content1 = '<section id="section1" class="sections">' +
                   "<h1>Block 1</h1> " +
                   "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>" +
                   "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>" +
                   "<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>"+
                "</section>";

如果有人能进一步帮助我，我将不胜感激。

Answer 1

在此声明中

oldChild.parentNode.replaceChild("newChild, oldChild.firstChild");

当您将这两个参数都放在引号内时，它们被视为一个参数。

您可能想删除引号并尝试

oldChild.parentNode.replaceChild(newChild, oldChild.firstChild);

要替换现有的子 DIV，首先需要在现有的子 div 中添加一些 id。像这样重写 HTML

<div id="derp" onclick="replace()">
    <div id="child">TODO write content</div>
</div>

然后

var newChild  = document.createElement("newChild");

var oldChild = document.getElementById("child");
var parentDiv = oldChild.parentNode;

function replace() 
{
    parentDiv.replaceChild(newChild, oldChild);
}

但这只会工作一次。下次尝试替换它时，什么都不会发生，因为 id child 的元素已经被替换为 id 为 newChild 的新元素。因此，您可能必须想出一些管理元素 ID 的方法。

更多信息请参考：Node.replaceChild()