Question

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

未捕获的TypeError：无法在'Node'上执行'replaceChild'：2 需要参数，但只有1个存在。

newChild和oldChild不是2个参数吗？

HTML

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

Javscript

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);
}

但这只会工作一次。下次尝试替换它时，不会发生任何事情，因为标识为child的元素已被替换为标识为newChild的新元素。所以你可能需要想出一些管理元素id的方法。

有关详细信息，请参阅此处：Node.replaceChild()

无法在'Node'上执行'replaceChild'：需要2个参数，但只有1个存在

1 个答案: