使用JS更改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";
}

當我嘗試運行else條件時，由於使用innerHTML顯示文本，我的內容被覆蓋。

我還有其他選擇可以使用javascript顯示文本而不使用innerHTML嗎？ 我也看到了一些DOM函數和其他相關文章，但對我沒有任何幫助。 即使在else條件之后，我的div屬性也應保持不變。

Answer 1

使用insertAdjacentHTML而不是innerHTML，因為它不會重新解析正在使用該元素的元素，因此不會破壞該元素內部的現有元素。

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

更好的方法是將一個具有類或id之類的屬性的新元素添加到overAllContainer中，以便在選擇更改時輕松將其刪除。 您可以通過

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

使用JS在div中更改內容而不破壞其內容，您可以簡單地使用+=; 而不是=僅。

代碼將為document.getElementById('overAllContainer').innerHTML += "some text";

Answer 3

使用document.createTextNode ：

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