Question

您好我有一点问题，我真的不知道如何修复它。所以我在一个按钮上放了一个表单，这个按钮在p元素中。当你“点击”按钮时，我想用一个p元素替换p元素，我有一些元素（type = text）和一个按钮。但是浏览器说他无法替换null的孩子。为什么如果我用我的p元素替换表单它可以工作，但我不再有我的表单只是p stay并且如果我替换表单element.childNodes 1浏览器直接重新加载？

这可行但不像我想要的

var contenu = document.getElementById("contenu");
var boiteElt = document.createElement("p");
var btnElt = document.createElement("p");
var formElt = document.createElement("form");
formElt.id = "leFrom";

var inputAuteur = document.createElement("input");
var inputValidation = document.createElement("button");
inputValidation.type = "submit";
inputValidation.textContent = "Ajouter";

var ajoutLien = document.createElement("button");
ajoutLien.id = "ajoutLien";
ajoutLien.textContent = "Ajouter un lien";
ajoutLien.addEventListener("click", function() {
    boiteElt.appendChild(inputAuteur);
    boiteElt.appendChild(inputValidation);

   contenu.replaceChild(boiteElt, contenu.childNodes[1]);

   //  this not works  ====>formElt.replaceChild(boiteElt, formElt.childNodes[1]);

});

inputValidation.addEventListener("click", function(e) {
 contenu.replaceChild(btnElt, contenu.childNodes[1]);
});
btnElt.appendChild(ajoutLien);
formElt.appendChild(btnElt);
contenu.appendChild(formElt);

    <div id="contenu">
    </div>

这不起作用，但我想要这样的东西

formElt.replaceChild(boiteElt, formElt.childNodes[1]);

我想替换p元素而不仅仅是按钮

感谢您的帮助和解释 "my Codepen"

Answer 1

使用<p>中的按钮或输入是不允许的，因为

<button>元素的内容模型为phrasing content（没有interactive content后代。）
<p>只能用于预期flow content的地方。

另一种方法是删除p元素，而使用带有<span>或display: block元素的<div>元素

使用replaceChild替换

1 个答案: