Альтернатива для innerHTML?

Мне интересно, есть ли способ изменить текст всего в HTML без использования innerHTML.

Причина, о которой я прошу, заключается в том, что она нахмурилась W3C. Я знаю, что это ничто, но я просто хочу знать, есть ли способ?

EDIT: люди, похоже, неправильно понимают, что я здесь прошу: я хочу найти способ эффективного изменения отображаемого текста.

Если у меня есть:

<div id="one">One</a>

innerHTML позволяет мне сделать это:

var text = document.getElementsById("one");
text.innerHTML = "Two";

И текст на моем экране изменится.
Я не хочу добавлять больше текста, я хочу изменить уже существующий текст.

Ответы

Ответ 1

Рекомендуемый способ - с помощью DOM-манипуляции, но он может быть довольно многословным. Например:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

ИЗМЕНИТЬ

В ответ на ваше редактирование, чтобы заменить текущий контент, вы просто удаляете существующий контент, а затем используйте приведенный выше код, чтобы заполнить новый контент. Например:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

Но, как сказал кто-то другой, я бы рекомендовал вместо него использовать что-то вроде jQuery, поскольку не все браузеры полностью поддерживают DOM, а те, которые имеют причуды, которые рассматриваются внутри библиотеки JavaScript. Например, jQuery выглядит примерно так:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

Ответ 2

Лучший способ сделать это - использовать document.createTextNode. Одной из основных причин использования этой функции вместо innerHTML является то, что все экранирование HTML-символов будет позаботиться о вас, тогда как вы должны были бы избежать своей строки самостоятельно, если бы вы просто устанавливали innerHTML.

Ответ 3

Вы можете получить тот же эффект, манипулируя DOM. Самый безопасный способ изменить текст - удалить все дочерние узлы элемента и заменить их новым текстом node.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

Удаление дочерних узлов избавляется от текстового содержимого вашего элемента, прежде чем заменять его новым текстом.

Причина, по которой большинство разработчиков избегает использования innerHTML, заключается в том, что доступ к элементам через DOM соответствует стандартам.

Ответ 4

Если вы хотите изменить простой текст, то есть более быстрое решение, основанное на стандартах:

document.getElementById("one").firstChild.data = "two";

В любом случае, обратите внимание, что innerHTML будет частью будущего стандарта HTML 5.

Ответ 5

Simple.

Замените text.innerHTML = 'two' на text.firstChild.nodeValue = 'two'.

Ответ 6

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

Это может быть как нежелательно, как innerHTML для вас, но у него есть преимущество работы в некоторых случаях (IE), где innerHTML или appendChild нет, например, некоторые узлы таблицы, текст стиля и script элементы и значение полей формы

Ответ 7

Вы можете использовать DOM следующим образом:

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

Но я думаю, что кто-то редко это делает, но использует фреймворк, например jQuery или Prototype или любой другой фреймворк javascript вне там. Это пример jquery:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

Ответ 8

Мне кажется, что комбинация CSS + HTML + JS должна достигать желаемых эффектов:

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

Кто-нибудь знает, работает ли это на практике?

Ответ 9

Ну, я правильно понимаю ваш вопрос, это должен быть ответ.

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

Ответ 10

Также ищем хорошую альтернативу обхода element.innerHTML Наконец-то я нашел это решение:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

Другая альтернатива без <template> теги, но вместо этого:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

Имейте в виду, что этот метод фактически "добавляет" содержимое, когда innerHTML "replace" content...

Это может помочь:

HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

doc: https://github.com/swannty/escaping-innerHTML
perf: https://jsperf.com/escaping-innerhtml

Ответ 11

Иногда мне удобно хранить прямую ссылку на текст node, если я собираюсь регулярно его обновлять. Я делаю что-то вроде этого:

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

И тогда, когда мне нужно его обновить, я просто делаю это:

dynamicText.nodeValue = "the updated text";

Это предотвращает необходимость перемещения DOM или добавления или удаления любых детей.