使用replaceChild替换表单中的p元素答案

【问题标题】：Using replaceChild to replace p element in form使用replaceChild替换表单中的p元素
【发布时间】：2017-03-17 18:54:12
【问题描述】：

您好，我有一个小问题，我真的不知道如何解决它。所以我在我放了一个按钮的那个表单中有一个表单，这个按钮在一个 p 元素中。当您“单击”按钮时，我想用另一个 p 元素替换 p 元素，我有一些元素（类型=文本）和一个按钮。但是浏览器说他不能替换null的Child。为什么如果我用我的 p 元素替换表单它可以工作但我不再有我的表单只是 p 停留并且如果我替换表单 element.childNodes1 浏览器直接重新加载？

这可行，但不像我想要的那样

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"

【问题讨论】：

你的意思是contenu.replaceChild(btnElt, contenu.childNodes[1]);？不阻止form提交的默认动作。
这是有效的。我想改变表格的内部

标签： javascript forms button

【解决方案1】：

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

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

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

【讨论】：