Поиск по сайту:

Разница между внутренним и внешним HTML


Эти два свойства весьма информативны, если вы поймете их контекст.

Свойства DOM InnerHTML и OuterHTML позволяют читать и записывать контент на веб-странице. Вы можете использовать их для получения разметки или внесения в нее изменений, и они во многом похожи. Но есть существенная разница.

При работе с DOM вы будете использовать InnerHTML и OuterHTML совершенно по-разному. Узнайте, как использовать эти два свойства, на практических примерах.

Что такое внутренний HTML?

Свойство InnerHTML является частью DOM, и вы можете получить к нему доступ через JavaScript. Вы можете использовать его для получения или установки содержимого элемента. Это содержимое исключает собственный тег элемента и включает только разметку, представляющую дочерние элементы элемента, в виде строки.

Рассмотрим этот пример кода:

<html>
<body>
    <p id="myP">I am a paragraph.</p>
    <script>
    document.getElementById("myP").innerHTML = "Hello World";
    </script>
</body>
</html>

В браузере вы увидите стандартный абзац с текстом замены, например:

Свойство InnerHTML выбирает и изменяет содержимое элемента

в этом примере.

Что такое внешний HTML?

Свойство OuterHTML во многом похоже на InnerHTML. Вы можете использовать его для получения или установки содержимого выбранного элемента. Однако он также устанавливает разметку, представляющую сам элемент. Сюда входят открывающий тег, любые свойства и, если применимо, закрывающий тег.

Вернитесь к предыдущему примеру, чтобы увидеть, чем отличается внешний HTML:

<html>
<body>
    <p id="myP">I am a paragraph.</p>
    <script>
    document.getElementById("myP").outerHTML = "<h1>This H1 replaced a paragraph.</h1>"
    </script>
</body>
</html>

В вашем браузере вы должны увидеть что-то вроде этого:

В этом примере свойство externalHTML заменяет элемент p на элемент h1.

Знайте разницу и когда использовать эти свойства

Свойства DOM InnerHTML и OuterHTML имеют много общего, но есть одно ключевое отличие. Свойство InnerHTML фиксирует HTML-содержимое элемента. Напротив, свойство externalHTML фиксирует HTML-код, который представляет сам элемент и его содержимое.

Вы можете использовать эти свойства для чтения и записи HTML-содержимого через DOM. DOM будет общей и важной концепцией на протяжении всего процесса разработки JavaScript.

Статьи по данной тематике: