innerHTML

Поддержка браузерами

Описание

Свойство innerHTML представляет собой содержимое элемента (элементы-потомки, комментарии, текст и т.д.), которое хранится в нём в виде строки. Свойство доступно для чтения и записи, поэтому у нас есть возможность получать и изменять содержимое элемента.

Примечание: если текстовый узел элемента содержит символы "&", "<" или ">", то свойство innerHTML преобразует эти символы в "&", "<" и ">" соответственно. Для получения правильной копии содержимого текстового узла используйте свойство textContent.

Синтаксис

// Получение содержимого элемента
var content = element.innerHTML;

// Установка содержимого для элемента
element.innerHTML = content;

При установке нового содержимого, сначала удаляется старое содержимое элемента, и только затем устанавливается новое.

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

Пример

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>Название документа</title>
  <script>
    function changeLink() {
      document.getElementById('myAnchor').innerHTML="Новая ссылка";
      document.getElementById('myAnchor').href="http://www.puzzleweb.ru";
      document.getElementById('myAnchor').target="_blank";
    }
  </script>

</head>
<body>

  <p><a id="myAnchor" href="#">Ссылка</a>
  <button type="button" onclick="changeLink()">Изменить ссылку</button><p>

</body>
</html>

Попробовать »