Свойства DOM innerHTML и externalHTML позволяют читать и записывать содержимое веб-страницы. Вы можете использовать их для извлечения разметки или внесения в нее изменений, и во многом они похожи. Но есть существенная разница.
При работе с DOM вы будете использовать innerHTML и externalHTML совершенно по-разному. Узнайте, как использовать эти два свойства на практических примерах.
Что такое внутренний HTML?
Свойство innerHTML является частью дом и вы можете получить к нему доступ через JavaScript. Вы можете использовать его для получения или установки содержимого элемента. Это содержимое исключает собственный тег элемента и включает только разметку, представляющую дочерние элементы элемента, в виде строки.
Рассмотрим этот пример кода:
<HTML><тело>
<пидентификатор="мойП">Я абзац.п>
<сценарий>
документ.getElementById("мойП").innerHTML = "Привет, мир";
сценарий>
тело>
HTML>
В вашем браузере вы увидите стандартный абзац с замещающим текстом, например:
Свойство innerHTML выбирает и изменяет содержимоеэлемент в этом примере.
Что такое внешний HTML?
Свойство externalHTML во многом похоже на innerHTML. Вы можете использовать его для получения или установки содержимого выбранного элемента. Однако он также устанавливает разметку, представляющую сам элемент. Это включает в себя открывающий тег, любые свойства и, где это уместно, закрывающий тег.
Вернитесь к предыдущему примеру, чтобы увидеть, чем отличается externalHTML:
<HTML><тело>
<пидентификатор="мойП">Я абзац.п><сценарий>
документ.getElementById("мойП").outerHTML = "Этот H1 заменил абзац.
"
сценарий>
тело>
HTML>
В вашем браузере вы должны увидеть что-то вроде этого:
В этом примере свойство externalHTML изменяет п элемент в h1 элемент.
Знайте разницу и когда использовать эти свойства
Свойства DOM innerHTML и externalHTML имеют много общего, но имеют одно ключевое отличие. Свойство innerHTML фиксирует HTML-содержимое элемента. Напротив, свойство externalHTML захватывает HTML-код, представляющий сам элемент и его содержимое.
Вы можете использовать эти свойства для чтения и записи HTML-контента через DOM. DOM будет общей важной концепцией на протяжении всего процесса разработки JavaScript.
