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

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

Пример использования innerHTML:

<div id="example">
  <p>Hello, world!</p>
</div>

const example = document.querySelector("#example")
console.log(example.innerHTML) // выводит: <p>Hello, world!</p>
example.innerHTML = "<p>Goodbye, world!</p>"

В этом примере мы используем метод querySelector() для получения элемента с id example. Затем мы используем свойство innerHTML для получения HTML-содержимого элемента и для изменения его на новое значение <p>Goodbye, world!</p>.

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

Пример использования outerHTML:

<div id="example">
  <p>Hello, world!</p>
</div>

const example = document.querySelector("#example")
console.log(example.outerHTML)
// выводит: <div id="example"><p>Hello, world!</p></div>
example.outerHTML = '<div id="new-example"><p>Goodbye, world!</p></div>'

В этом примере мы используем метод querySelector() для получения элемента с id example. Затем мы используем свойство outerHTML для получения HTML-кода элемента и для изменения его на новое значение <div id="new-example"><p>Goodbye, world!</p></div>.

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

Назад