/ ↲
    Расширенный поиск

    JavaScript

    .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'

    Читайте также