javascript - 无法在 'replaceChild' : 2 arguments required, 上执行 'Node'，但仅存在 1 个

Question

我尝试用多种不同的方式替换元素，但没有成功。 .write 不好，innerHTML 仅替换内容，但我想替换整个元素。这个方法看起来最简单，但这次我不知道哪里出了问题。当我按下按钮时，出现错误:

Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': 2 arguments required, but only 1 present.

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()