TextNode или innerHTML

Question

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

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

Вопросы являются:

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

Answer 1

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

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

Чтобы быть совершенно правильно, вы могли бы сделать это:

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