Блог

Главная - Вопросы по программированию - Javascript — содержимое div без innerHTML

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

#javascript #dom

#javascript #dom

Вопрос:

Я хотел спросить, как изменить содержимое div, но не используя innerhtml.

Комментарии:

1. Почему бы не использовать innerHTML?

2. Методы манипулирования DOM: quirksmode.org/dom/w3c_core.html#nodemanipulation

3. @GolezTrol Потому что это не стандартно. Это неправильный способ делать что-то с перспективной точки зрения. Он обрабатывает DOM как строку, когда это не так. Он полностью уничтожает любые события, которые были на этих элементах.

4. @Ryan Kinal механизм «innerHTML» стандартизирован с HTML5.

5. По общему признанию, бывают случаи, когда использование innerHTML не является работой дьявола. Тем не менее, вы всегда должны спрашивать себя, подходит ли этот инструмент для вашей работы. Было так много раз , когда я был вынужден перейти на манипуляции .innerHTML с DOM из-за проблем с событиями и постоянно растущей детализацией изменений. Просто более расширяемо использовать методы DOM.

Ответ №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 );

Комментарии:

1. Похоже <span> , что элемент здесь полностью избыточен. Вы могли бы просто добавить текстовый узел div .

2. @duri: Я думаю, речь идет о демонстрации того, как работает манипуляция DOM.

3. @duri: Да, я показывал, как создать новый элемент… Как сказал Феликс. 😉

Ответ №2:

Вы можете использовать nodeValue для доступа к значению узла, однако значение a 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.";

Комментарии:

1. Я не голосую против, потому что у вас только 1 представитель, но если бы у вас было больше, я бы так и сделал. Нам (сообществу JavaScript) необходимо прекратить использование innerHTML.

2. @Incognito Почему? innerHTML часто быстрее, чем использование атрибутов и методов ядра DOM. Он также хорошо поддерживается и с HTML5 больше не является собственностью.

3. @duri быстрее? … Ты … ты меня троллишь?

4. @Incognito quirksmode.org/dom/innerhtml.html Тест несколько устарел, но разрешение Наиболее очевидным выводом из этих тестов является то, что innerHTML работает быстрее, чем «настоящие» методы W3C DOM во всех браузерах. все еще действует.

5. @duri эти тесты слишком старые, любой разумный современный браузер быстрее работает с методами DOM, чем с innerHTML. Кроме того, браузеры оптимизируют то, что мы используем, поэтому, если мы используем DOM, DOM будет быстрее. И помните, что мы не хотим использовать innerHTML по очевидным причинам.

Ответ №3:

Элемент DIV — это общий элемент уровня блока (по умолчанию) в HTML, используемый в качестве структурного контейнера для хранения одного или нескольких блочных или встроенных элементов.

В зависимости от того, что вы хотите изменить, вы можете либо напрямую выбрать соответствующий подузел, перебрать свойство childNodes, чтобы найти нужный подузел, либо полностью переписать содержимое в виде html с использованием innerHTML (что, как вы заявили, вы не хотели делать).

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

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

Ответ №4:

Я знаю, что опаздываю, но .textContent могу быть заменен на .innerHTML (если вы хотите изменить только текст, а не код HTML).