使用 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 来显示文本。

我还有其他选项可以在不使用 innerHTML 的情况下使用 javascript 显示文本吗？ 我还看到了一些 DOM 函数和其他相关帖子，但对我没有任何帮助。即使在 else 条件之后，我的 div 属性也应该保持原样。

Answer 1

使用 JS 更改 div 中的内容而不破坏其内容，您可以简单地使用 +=; 而不是仅使用 =。

代码将是document.getElementById('overAllContainer').innerHTML += "some text";

Answer 2

使用 insertAdjacentHTML 而不是 innerHTML，因为它不会重新解析正在使用的元素，因此不会破坏元素内的现有元素。

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

一个更好的方法是在你的 overAllContainer 中添加一个带有类或 id 等属性的新元素，以便在你的选择发生变化时轻松删除它。 你可以通过

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 3

使用document.createTextNode:

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