Javascript - содержимое div без innerHTML

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, чтобы найти нужный подузел, либо полностью переписайте содержимое в виде html с использованием innerHTML (что, как вы заявили, не требуется делать).

Если вы хотите добавить контент, вы можете создать новый элемент и использовать метод appendChild (child) элемента DIV для добавления к его содержимому.

Это то, что вы искали?