TextNode или innerHTML

Предположим, что мы имеем следующий элемент <p id="abc">Hello World</p>. Если я хочу изменить содержимое тега <p>, у меня есть два способа в коде javascript: 

document.getElementById("abc").innerHTML="good morning";
document.getElementById("abc").firstChild.nodeValue="good morning";

Вопросы:

  • Какая разница между двумя решениями?
  • Какую пользу я должен использовать? Есть ли один лучше другого?

Ответы

Ответ 1

Первый будет удалять любые элементы HTML, которые могут находиться внутри вашего целевого элемента. Второй будет работать, только если первый ребенок представляет собой текст node (распространенная ошибка заключается в попытке использовать его на пустом элементе).

Второй вариант "более правильный" (innerHTML - действительно яркий ярлык на основе haxy), но первый, безусловно, более надежный. Тем не менее, он уязвим для инъекций XSS.

Чтобы быть полностью правильным, вы бы сделали следующее:

var abc = document.getElementById('abc');
while(abc.firstChild) abc.removeChild(abc.firstChild);
abc.appendChild(document.createTextNode("good morning"));