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函数和其他相关帖子，但对我来说没有任何效果。我的div属性应该保持原样，即使在else条件之后也是如此。

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

使用JS更改div中的内容而不破坏其内容

3 个答案: