Перезапись содержимого элемента объекта Element

Кроме методов и свойств объекта Node в JavaScript мы можем использовать свойства и методы объектов Element. Важно не путать эти два объекта: Node и Element. Node представляет все узлы веб-станицы, в то время как объект Element представляет непосредственно только html-элементы. То есть объекты Element это фактически те же самые узлы объекты Node, у которых тип узла свойство nodeType равно 1.

Для получения или установки текстового содержимого элемента мы можем использовать свойство innerText, а для получения или установки кода html - свойство innerHTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
console.log(articleDiv.innerText);
console.log("_______________________");
console.log(articleDiv.innerHTML);
</script>
</body>
</html>

Надо отметить, что свойство innerText во многом аналогично свойству textContent. То есть следующие вызовы будут равноценны:

var pElement = document.querySelectorAll("div.article p")[0];
pElement.innerText = "hello";
pElement.textContent = "hello";

Установка кода html у элемента:

var articleDiv = document.querySelector("div.article");
articleDiv.innerHTML ="Hello World!!!
bla bla bla
";