Javascript - 没有innerHTML的div内容

Question

我想问一下如何更改div内容，但不想使用innerhtml。

Answer 1

DEMO： http://jsfiddle.net/Cb6ME/

   // get the div
var div = document.getElementById('foo');

   // remove child nodes while at least one exists
while( div.childNodes[0] ) {
    div.removeChild( div.childNodes[0] );
}
   // create a new span element
var span = document.createElement( 'span' );

   // give it some text content
span.appendChild( document.createTextNode("I'm new!!!") );

   // append the span to the original div
div.appendChild( span );

Answer 2

您可以使用nodeValue来访问节点的值，但是div的值。在您的示例中，您可能具有以下HTML ...

<div id="myLovelyDiv">This is the text that you want to change</div>

和这个脚本......

var myDiv = getElementById("myLovelyDiv");
myDiv.childNodes[0].nodeValue = "The text has been changed.";

但我不明白为什么你不会使用

myDiv.innerHTML = "The text has been changed properly.";

Answer 3

DIV元素是HTML中的通用块级别（默认情况下）元素，用作容纳一个或多个块或内联元素的结构容器。

根据您想要更改的内容，您可以直接选择有问题的子节点，遍历childNodes属性以查找所需的子节点，或使用innerHTML（您声明的内容）将内容完全重写为html不想做。）

如果要添加内容，可以创建新元素，并使用DIV元素的appendChild（子）方法添加内容。

那是你在找什么？

Answer 4

我知道我迟到了，但是 .textContent 可以替换为 .innerHTML（如果您只想更改文本而不是编写 HTML 代码）。