Question

我有一个div，div有一个游戏的iframe。我想在iframe下面的div中添加内容，但是当我这样做时，iframe（也就是textarea）会刷新。

我想

将HTML内容添加到div
请勿修改预先存在的内容。
如果可能，不使用JQuery

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

感谢您的耐心等待。

function send()
{

if($('sendtxt').value == ":custom:"){
  $('content').innerHTML += "<br>" + "<textarea>this text also refresh</textarea>";
  $('sendtxt').value = "";
} else {
  $('content').innerHTML += "<br>" + $('sendtxt').value;
  $('sendtxt').value = "";
}

}

function $(id)
{

return document.getElementById(id);

}

#content {
  
  display:block;
  width:100%;
  height:100%;
  margin:0;
  background-color:#222;
  color:white;
}

textarea, input {

  display:inline-block;
}

textarea {
  width:calc(100%);
  height:50px;
}

input[type="button"]{
  margin:0;
  width:50px;
  height:50px;
  right:10px;
  top:5px;
  position:absolute;
}

The iframe doesn't seem to work in here. but the textarea have the same effect.

<textarea placeholder="send a text!!!" id="sendtxt"></textarea><input type="button" value=">>" onclick="send()"/><br>

<div id="content">

<textarea>This text is going to refresh, when you click the button. change it and see it go back to normal</textarea>

</div>

Answer 1

当您通过向元素添加新内容来修改innerHTML时，会使用新HTML重新呈现该元素。

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

我是通过在下面创建一个#changing div来做到这一点的。现场演示：

＆＃13;

function send() {
  $('changing').innerHTML += "<br>" + $('sendtxt').value;
  $('sendtxt').value = "";
}

function $(id) {
  return document.getElementById(id);
}

＆＃13;

#content {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #222;
  color: white;
}

iframe {
  width: 30%;
  height: calc(30%);
}

textarea,
input {
  display: inline-block;
}

textarea {
  width: calc(100%);
  height: 50px;
}

input[type="button"] {
  margin: 0;
  width: 50px;
  height: 50px;
  right: 10px;
  top: 5px;
  position: absolute;
}

＆＃13;

<textarea placeholder="send a text!!!" id="sendtxt"></textarea><input type="button" value=">>" onclick="send()" /><br>

<div id="content">

  <iframe src="http://www.bitwinent.com/games/blue/index.html">HTML NOT SUPPORTED</iframe>
  <textarea>[the iframe doens't seem to work in here] This text is going to refresh, when you click the button. change it and see it go back to normal</textarea>
  
  <div id="changing"></div>

</div>

＆＃13;

Answer 2

这是因为当你更新innerHTML属性时，浏览器会破坏现有的DOM节点，解析HTML字符串并为它们创建新的DOM节点，这些节点被添加为你设置{{ 1}}。

这样可以重新加载iframe并每次将textarea重置为原始值。

相反，在textarea之后创建一个专用div，然后修改它的.innerHTML。

在不刷新iframe的情况下将内容添加到div

2 个答案: