使用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);