Когда нужно использовать .innerHTML и когда document.write в JavaScript

Существует ли общее правило, когда следует использовать document.write для изменения содержимого веб-сайта и использования .innerHTML?

До сих пор моими правилами были:

1) Используйте document.write, когда добавляет новый контент

2) Используйте .innerHTML, когда меняет существующий контент

Но я смутился, так как кто-то сказал мне, что, с одной стороны, .innerHTML - странный стандарт Microsoft, но, с другой стороны, я читал, что document.write не разрешен в XHTML.

Какие структуры следует использовать для управления моим исходным кодом с помощью JavaScript?

Ответы

Ответ 1

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

document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'

Хотя я бы предложил использовать как можно больше API-интерфейсов DOM-манипуляции (например, document.createElement, document.createDocumentFragment, <element>.appendChild и т.д.). Но это только мое предпочтение.

Единственный раз, когда я видел применимое использование document.write, находится в HTML5 Boilerplate (посмотрите, как он проверяет правильность загрузки jQuery). Кроме этого, я бы держался подальше от него.

Ответ 2

innerHTML и document.write на самом деле не являются сопоставимыми методами динамического изменения/вставки контента, поскольку их использование различно и для разных целей.

document.write должен быть привязан к конкретным случаям использования. Когда страница загружена и DOM готов, вы больше не можете использовать этот метод. Именно поэтому обычно чаще всего используется в условных выражениях, в которых вы можете использовать его для синхронной загрузки внешнего файла javascript (библиотек javascript), включая блоки <script> (например, когда вы загружаете jQuery из CDN в HTML5 Boilerplate).

То, что вы читаете об этом методе и XHTML, соответствует действительности, когда страница обслуживается вместе с типом mime application/xhtml+xml: w3.org

document.write (как document.writeln) не работает в документах XHTML (вы получите ошибку "Операция не поддерживается" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) на консоли ошибок). Это имеет место, если открыть локальный файл с расширением .xhtml или для любого документа, обслуживаемого с помощью MIME-типа application/xhtml + xml

Другое различие между этими подходами связано с узлом вставки: когда вы используете метод .innerHTML, вы можете выбрать, куда добавлять контент, при использовании document.write узел вставки всегда является частью документа, в которой использовался этот метод.

Ответ 3

1) document.write() помещает содержимое прямо в браузер, где его может видеть пользователь.

этот метод записывает в документ выражения HTML или код JavaScript.

Приведенный ниже пример просто напечатает ‘Hello World в документе

<html>
  <body>
    <script>
    document.write("Hello World!");
    </script>
  </body>
</html>

2) document.innerHTML меняет внутреннее содержимое элемента

Изменяет существующее содержимое элемента

Приведенный ниже код изменит содержание тега p

<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
  document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>

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