Javascript - 没有innerHTML的div内容

Question

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

Answer 1

演示： 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(child) 方法来添加其内容。

这就是您要找的吗？

Answer 4

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