Правильный способ изменить текст и элементы на странице с помощью JavaScript

Question

Я некоторое время использовал innerHTML и innerText для изменения элементов и текста на веб-страницах, и я только что обнаружил, что они не соответствуют стандарту W3C.

Я нашел сейчасчто innerHTML можно заменить на createElement, setAttribute и некоторые другие, но каков наилучший способ изменения текста внутри элемента?

Я также нашел textContent, но есть листандартный способ и реализован ли он в старых браузерах?

Answer 1

textContent не реализовано в IE8 и ниже. Вы можете использовать createTextNode () аналогично тому, как вы используете createElement () . Тем не менее, я часто использую методы обнаружения, чтобы выяснить, какое свойство мне нужно использовать, и сохранить ссылку на него:

// You can use a shorter variable name if you want
var innerTextOrTextContent = "textContent" in document.body 
                               ? "textContent" : "innerText";

// Set an element's text:
myElement[innerTextOrTextContent] = "Added using: "+innerTextOrTextContent;

createTextNode () пример:

var tNode = document.createTextNode("Added using createTextNode()");
myElement.appendChild(tNode);

Что-то, о чем я часто забываю, вы также можете напрямую установить значение текстового узла, если можете получить ссылку на него:

// childNodes[0] is a text node:
myElement.childNodes[0].nodeValue = "Added using nodeValue";

Пример - http://jsfiddle.net/BxPaG/.

Answer 2

Я думаю, вы не ошибетесь, используя все, что предлагает ваша библиотека javascript для изменения текста (innerHtml для jQuery) В конце концов, одной из основных причин использования такой библиотеки является наличие платформы, которая абстрагируется от различных реализаций браузера.