`.outerHTML`

Время чтения: меньше 5 мин

Кратко

Свойство Element.outerHTML позволяет получить HTML-элемент, включая его содержимое, в виде HTML-строки или заменить элемент на новый HTML.

Новое значение HTML передаётся в виде строки и оно полностью заменит весь элемент. В Element.outerHTML нельзя передать DOM-элемент, только строку.

Пример

        
          
          <section>  <h1>Введение</h1>  <p>Параграф с текстом</p>  <p>Второй параграф с текстом</p></section>
          <section>
  <h1>Введение</h1>
  <p>Параграф с текстом</p>
  <p>Второй параграф с текстом</p>
</section>

        
          
          const section = document.querySelector('section')console.log(section.outerHTML)
          const section = document.querySelector('section')

console.log(section.outerHTML)

В таком случае выведется весь HTML, включая сам элемент:

        
          
          <section><h1>Введение</h1><p>Параграф с текстом</p><p>Второй параграф с текстом</p></section>
          <section><h1>Введение</h1><p>Параграф с текстом</p><p>Второй параграф с текстом</p></section>

Если теперь заменить содержимое новым HTML

        
          
          section.outerHTML = '<h2>Второй заголовок</h2>'
          section.outerHTML = '<h2>Второй заголовок</h2>'

HTML после изменения будет:

        
          
          <h2>Второй заголовок</h2>
          <h2>Второй заголовок</h2>

Открыть демо в новой вкладке

Как понять

Element.outerHTML проще понять в сравнении с другим похожим свойством – Element.innerHTML.

Element.innerHTML позволяет получить только содержимое элемента как HTML-строку. В то время как Element.outerHTML делает тоже самое, но при этом возвращает и HTML самого элемента. Можно сказать, что вывод будет идентичен Element.innerHTML, только в строке будет содержаться открывающий и закрывающий тег самого элемента, у которого было вызвано свойство.

Так же как и Element.innerHTML, если в Element.outerHTML присвоить новое значение, то это приводит к перерисовке страницы.

Как пишется

Обращение к свойству Element.outerHTML вернёт элемент и его содержимое виде HTML-строки. Просмотреть можно любой элемент, но изменить можно любой, кроме <html>.

Присвоение нового значения к свойству полностью удалит элемент и заменит его новым HTML.

        
          
          <header>Название сайта</header>
          <header>Название сайта</header>

        
          
          const header = document.querySelector('header')header.outerHTML = '<span class="logo"></span>'
          const header = document.querySelector('header')

header.outerHTML = '<span class="logo"></span>'

HTML после изменения будет:

        
          
          <span class="logo"></span>
          <span class="logo"></span>

Новый элемент полностью заменит <header>.

        
          
          document.body.outerHTML = '<h1>Я новое содержимое страницы<h1>'
          document.body.outerHTML = '<h1>Я новое содержимое страницы<h1>'

В результате в документ будет такой HTML:

        
          
          <body>  <h1>Я новое содержимое страницы<h1></body>
          <body>
  <h1>Я новое содержимое страницы<h1>
</body>

<body> остался на странице, а новое значение стало содержимым элемента.

Если попробовать изменить Element.outerHTML у <html>, то браузер выбросит ошибку.

        
          
          const html = document.querySelector('html')html.outerHTML = '<div>Я новый HTML</div>'// Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element'
          const html = document.querySelector('html')

html.outerHTML = '<div>Я новый HTML</div>'
// Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element'