Javascript重复追加文本区域值问题

我创建了一个包含四个文本区域和一个提交按钮的表单。这种形式的原因是，当我按下submit按钮以附加我在div内的文本区域中插入的值（文本）时

当我按下提交按钮时，我可以看到我在四个文本区域中插入的文本，但是当我再次按下提交按钮时，它将附加另外四个文本区域，依此类推

我想做的是，每当我按下submit按钮时，只显示四个文本区域（带有更新的文本），而不附加另外四个文本区域

var firstContent=document.getElementById（“第一个内容”）；
var secondContent=document.getElementById（“第二个内容”）；
var thirdContent=document.getElementById（“第三个内容”）；
var fourthContent=document.getElementById（“第四个内容”）；
var customContainer=document.getElementById（“c-content”）；
var submitBtn=document.getElementById（“c-btn”）；
函数submitCustomForm（）{
var cElementOne=document.createElement（“p”）；
cElementOne.innerHTML=firstContent.value；
customContainer.append（cElementOne）；
var celementwo=document.createElement（“p”）；
celementwo.innerHTML=secondContent.value；
customContainer.append（celement2）；
var cElementThree=document.createElement（“p”）；
cElementThree.innerHTML=thirdContent.value；
customContainer.append（cElementThree）；
var cElementFour=document.createElement（“p”）；
cElementFour.innerHTML=fourthContent.value；
customContainer.append（cElementFour）；
}
submitBtn.addEventListener（“单击”，提交自定义表单）

第一内容

第二内容

第三内容

第四内容
提交
每次调用
submitCustomForm（）
都会创建新的
p
元素。因此，您正在插入新元素，而不是更新旧元素

您可以尝试以下方法：


var customContainer=document.getElementById（“c-content”）；
var submitBtn=document.getElementById（“c-btn”）；
submitBtn.addEventListener（“单击”，提交自定义表单）；
var celeents=[null，null，null，null]；
变量内容=[
document.getElementById（“第一个内容”），
document.getElementById（“第二个内容”），
document.getElementById（“第三个内容”），
document.getElementById（“第四个内容”）
];
函数getElement（否）{
如果（cElements[no]==null）{
cElements[no]=document.createElement（“p”）；
customContainer.append（celeents[no]）；
}
返回芹菜[否]；
}
函数submitCustomForm（）{
对于（var i=0；i
var customContainer=document.getElementById（“c-content”）；
var submitBtn=document.getElementById（“c-btn”）；
函数submitCustomForm（）{
//清除内容
customContainer.innerHTML=“”；
var txtid=[“第一”、“第二”、“第三”、“第四”]；
对于（变量i=0；i0）{
var htmlText=document.createElement（“p”）；
htmlText.innerHTML=contentvalue；
parent.append（htmltxt）；
}
}
submitBtn.addEventListener（“单击”，提交自定义表单）；

第一内容

第二内容

第三内容

第四内容
提交
将按钮更改为
type=“button”
Too用更新的文本显示四个文本区域是什么意思？我的意思是，当我将任何文本区域的文本更改为更新并仅显示四个文本区域时，我在其中插入了最新的文本。一个简单的解决方案可以在将任何内容附加到它并将最新的结果附加到它之前清空你的父级ontainer.innerHTML=“”；在您提交的自定义表单（）函数中，您可以根据我的表单向我提供该函数的代码吗？谢谢您的回答。我已经尝试了上面的代码，但它不起作用。现在您还需要创建第一个内容、第二个内容等数组：）@mplungjan我知道，但我想保持示例的相同命名法Sure-但你还是创建了更优雅的版本：）@mplungjan谢谢-但似乎没有回报；-）年，但这是对元素创建的浪费