コンテンツを破棄せずにdivでコンテンツを変更する

Question

私は、選択ボックスの値が変更されたときにjavascript関数が呼び出されるアプリケーションを使用しています。関数にはif/else文があります。条件が有効であれば、divにグラフが表示され、それ以外の場合は同じdivにテキストが表示されます。

var arrayDataSource = []; 
//for example this array has the following [[1,0.2],[2,0],[3,1] 
$.each(test, function(index, value) 
{ 
    //code to load data to that array 
}); 
) 
if(arrayDataSource.length > 0) { 
    //draw graph 
} else { 
    document.getElementById('mydiv').innerHTML = "some text"; 
} 

私はテキストを表示するinnerHTMLを使用していて、私のコンテンツが上書きされてしまう状態他を実行してみてください。

innerHTMLを使用せずにJavaScriptでテキストを表示するオプションはありますか？私はまた、いくつかのDOMの機能と他の関連記事を見ましたが、何も私のために働いたことはありません。私のdivのプロパティは、else条件の後であってもそのまま残ります。

Answer 1

innerHTMLではなくinsertAdjacentHTMLを使用します。これは、使用されている要素を再解析しないため、要素内の既存の要素が壊れないためです。それはあなたの選択の変更を容易に除去するために、そのようなあなたのoverAllContainerに、クラスやIDなどの属性を持つ新しい要素を追加することです行うには

document.getElementById('overAllContainer').insertAdjacentHTML('beforeend', 'some text'); 

良い方法。 あなたは

document.getElementById('overAllContainer').insertAdjacentHTML('beforeend', '<p class="message">some text</p>'); 

それとも

var message = document.createElement('p'); 
message.setAttribute('class', 'message'); 
message.innerText = 'some text'; 
document.getElementById('overAllContainer').appendChild(message); 

そして、あなたは選択の変化に基づいてメッセージを削除したいときに、

document.querySelector('#overAllContainer .message').remove(); 

Answer 2

を持つdiv要素の内容を変更するビアそれを行うことができますJSの内容を破壊することなく、=の代わりに+=;を単に使うことができます。

コードがdocument.getElementById('overAllContainer').innerHTML += "some text";

Answer 3

使用document.createTextNode次のようになります。

var text = document.createTextNode("some text"); 
document.getElementById('mydiv').appendChild(text);