.outerHTML

Читаем и заменяем HTML-элемент и всё его содержание на новое.

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

Кратко

Секция статьи "Кратко"

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

Новое значение HTML передаётся в виде строки и оно полностью заменит весь элемент. В 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>

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

Как понять

Секция статьи "Как понять"

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

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

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

Как пишется

Секция статьи "Как пишется"

Обращение к свойству 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> остался на странице, а новое значение стало содержимым элемента.

Если попробовать изменить 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'