Javascript 将内容添加到div而不刷新iframe

我有一个div，div有一个带游戏的iframe。 我想在iframe下面的div中添加内容，但是当我添加内容时，iframe（也就是文本区域）会刷新

我想

• 将HTML内容添加到div
• 不要修改先前存在的内容
• 如果可能，不使用JQuery

我知道DOM替换的效果，我只是希望这是可能的。问题是，我不能仅仅为它创建一个专用div，因为iframe和文本区域本身应该是变化div的一部分（iframe可以添加到聊天日志中，在聊天中使用一些“BBCode”）

我感谢你的耐心

函数send（）
{
如果（$（'sendtxt'）。值==”：自定义：）{
$（'content'）.innerHTML+=“
”+“此文本也会刷新”；
$（'sendtxt'）。value=“”；
}否则{
$（'content'）.innerHTML++=“
”++$（'sendtxt'）.value；
$（'sendtxt'）。value=“”；
}
}
函数$（id）
{
返回文档.getElementById（id）；
}

#内容{
显示：块；
宽度：100%；
身高：100%；
保证金：0；
背景色：#222；
颜色：白色；
}
文本区，输入{
显示：内联块；
}
文本区{
宽度：钙（100%）；
高度：50px；
}
输入[type=“button”]{
保证金：0；
宽度：50px；
高度：50px；
右：10px；
顶部：5px；
位置：绝对位置；
}

iframe在这里似乎不起作用。但是文本区域也有同样的效果。


单击按钮时，此文本将刷新。改变它，让它恢复正常

当您通过向元素添加新内容来修改

innerHTML

时，元素将使用新的HTML重新呈现

那么，为什么不在它里面创建一个额外的元素来保存不断变化的内容，同时又不干扰它之外的内容呢

我通过在下面创建一个

#更改
div来实现这一点。现场演示：


函数send（）{
$（'changing'）.innerHTML++=“
”++$（'sendtxt'）.value；
$（'sendtxt'）。value=“”；
}
函数$（id）{
返回文档.getElementById（id）；
}
#内容{
显示：块；
宽度：100%；
身高：100%；
保证金：0；
背景色：#222；
颜色：白色；
}
iframe{
宽度：30%；
身高：钙（30%）；
}
文本区，
输入{
显示：内联块；
}
文本区{
宽度：钙（100%）；
高度：50px；
}
输入[type=“button”]{
保证金：0；
宽度：50px；
高度：50px；
右：10px；
顶部：5px；
位置：绝对位置；
}


不支持HTML
[此处的iframe似乎不起作用]当您单击按钮时，此文本将刷新。改变它，让它恢复正常
这是因为当您更新
innerHTML
属性时，浏览器会销毁现有的DOM节点，解析HTML字符串并为它们创建新的DOM节点，这些节点作为您设置的
.innerHTML
的节点的子节点添加

这将产生每次重新加载iframe并将textarea重置为原始值的效果

相反，在textarea之后创建一个专用的div，并修改它的
innerHTML
。
我不能这样做，因为iframe本身可以使用聊天室中的textarea（某种bbcode）添加。我知道dom替换的这种效果，我只是希望这是可能的。问题是，我不能仅仅为它创建一个专用div，因为iframe和textarea本身应该是变化div的一部分（iframe可以添加到聊天日志中，在聊天记录中使用一些“bbcode”）伟大的头脑-我们在大约20秒内发布了几乎完全相同的答案。我对代码段（如果您发送）做了一些更改：custom:“它将附加一个文本，而不是一个文本，在发送新消息时也会重置。难道没有任何“保存”内容状态的方法吗？