Hinzufügen von Inhalt zu einem div ohne iframe

Question

Ich habe ein div, und das div hat einen iframe mit einem Spiel. Ich möchte Inhalt zu diesem div hinzufügen, unter dem iframe, aber wenn ich es tue, wird der iframe (auch dieser textarea) aktualisiert.

Ich möchte

• HTML-Inhalt an den div hinzufügen
• Sie den bereits existierenden Inhalt nicht ändern.
• Wenn möglich, ohne JQuery

weiß, dass ich die Wirkung von DOM zu ersetzen, ich wollte nur dies möglich sein könnte. Das Problem ist, ich kann kein dediziertes div nur dafür erstellen, weil der iframe und der Textbereich selbst Teil des sich ändernden div sein sollen (der iframe kann dem chat log hinzugefügt werden, indem ein "BBCode" hier verwendet wird) der Chat)

Ich schätze Ihre Geduld.

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

Wenn Sie innerHTML ändern, wie Sie durch Anhängen von neuen Inhalten zu einem Element zu tun haben ist, wird das Element mit dem neuen HTML-neu gerendert.

Also, warum nicht ein zusätzliches Element darin erstellen, um Ihre sich ändernden Inhalte zu halten, ohne dabei zu stören, was sich außerhalb davon befindet?

Ich tat dies, indem ich ein #changing div darunter schuf. Live-Demo:

function send() { 
 
    $('changing').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; 
 
} 
 

 
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; 
 
}

<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>

Answer 2

Dies liegt daran, wenn Sie die innerHTML Eigenschaft aktualisieren, der Browser den vorhandenen DOM-Knoten zerstört, analysiert den HTML-String und erstellt neuen DOM-Knoten für sie, die hinzugefügt werden, wie Kinder des Knotens setzen Sie die .innerHTML von.

Dadurch wird der Iframe neu geladen und das Textfeld jedes Mal auf den ursprünglichen Wert zurückgesetzt.

Erstellen Sie stattdessen ein dediziertes div nach dem Textfeld und ändern Sie stattdessen die innerHTML davon.