Каковы альтернативы document.write?

В учебниках я научился использовать document.write. Теперь я понимаю, что многие это неодобрительно. Я пробовал print(), но затем он буквально отправляет его на принтер.

Итак, какие альтернативы я должен использовать, и почему я не должен использовать document.write? Как w3schools, так и MDN используют document.write.

Ответы

Ответ 1

В качестве рекомендуемой альтернативы document.write вы можете использовать DOM-манипуляцию для прямого запроса и добавления элементов node в DOM.

Ответ 2

Причина, по которой ваш HTML заменяется, вызвана злой функцией JavaScript: document.write().

Это определенно "плохая форма". Он работает только с веб-страницами, если вы используете его при загрузке страницы; и если вы используете его во время выполнения, он заменит весь документ на вход. И если вы применяете его как строгую структуру XHTML, это даже не правильный код.

проблема:

document.write записывается в поток документа. Вызов document.write в закрытом (или загруженном) документе автоматически вызывает document.open, который очистит документ.

- цитата из MDN

document.write() имеет двух приспешников, document.open(), и document.close(). Когда документ HTML загружается, документ "открыт". Когда документ закончил загрузку, документ "закрыт". Используя document.write(), вы удалите весь (закрытый) HTML-документ и замените его новым (открытым) документом. Это означает, что ваша веб-страница стерла себя и начала писать новую страницу - с нуля.

Я верю, что document.write() заставляет браузер иметь снижение производительности (исправьте меня, если я ошибаюсь).

пример:

Этот пример записывает вывод в документ HTML после, который загрузила страница. Смотрите document.write() злые силы очищают весь документ, когда вы нажимаете кнопку "Истребить":

I am an ordinary HTML page.  I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/>
me!

Ответ 3

Вот код, который должен заменить document.write на месте:

document.write=function(s){
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length-1];
    lastScript.insertAdjacentHTML("beforebegin", s);
}

Ответ 4

Просто отбросьте здесь примечание, чтобы сказать, что, хотя использование document.write сильно осуждается из-за производительности (синхронная инъекция и оценка DOM), существует также фактическая альтернатива 1:1, если вы используете document.write для ввода тегов script по запросу.

Есть много отличных способов избежать этого (например, script загрузчики, такие как RequireJS, которые управляют цепочками зависимостей), но они более инвазивны и поэтому лучше всего используются на сайте/приложении.

Ответ 5

Вопрос зависит от того, что вы на самом деле пытаетесь сделать.

Обычно вместо document.write вы можете использовать someElement.innerHTML или лучше, document.createElement с someElement.appendChild.

Вы также можете использовать библиотеку jQuery и использовать там функции модификации: http://api.jquery.com/category/manipulation/

Ответ 6

Это, вероятно, самая правильная прямая замена: insertAdjacentHTML.

Ответ 7

Попробуйте использовать getElementById() или getElementsByName() для доступа к определенному элементу, а затем использовать свойство innerHTML:

<html>
    <body>
        <div id="myDiv1"></div>
        <div id="myDiv2"></div>
    </body>

    <script type="text/javascript">
        var myDiv1 = document.getElementById("myDiv1");
        var myDiv2 = document.getElementById("myDiv2");

        myDiv1.innerHTML = "<b>Content of 1st DIV</b>";
        myDiv2.innerHTML = "<i>Content of second DIV element</i>";
    </script>
</html>

Ответ 8

Я не вижу проблемы с document.write. Если вы используете его перед тем, как событие onload запускает, как вы предположили, создавать элементы из структурированных данных, например, это подходящий инструмент для использования. Нет преимущества производительности при использовании insertAdjacentHTML или явного добавления узлов в DOM после его создания. Я просто протестировал его тремя разными способами со старым script, который я когда-то использовал для планирования входящих вызовов модема для круглосуточной службы на банке из 4 модемов.

К моменту завершения этого script создается более 3000 узлов DOM, в основном ячеек таблицы. На 7-летнем ПК, на котором работает Firefox на Vista, это небольшое упражнение занимает менее 2 секунд, используя document.write из локального исходного файла 12kb и три 1px GIF, которые повторно используются примерно 2000 раз. Страница просто появляется полностью сформированная, готовая обрабатывать события.

Использование insertAdjacentHTML не является прямой заменой, так как браузер закрывает теги, которые требует script, и занимает в два раза больше времени, чтобы в конечном итоге создать поврежденную страницу. Запись всех фрагментов в строку, а затем передача ее на insertAdjacentHTML занимает еще больше времени, но, по крайней мере, вы создаете страницу как созданную. Другие варианты (например, ручное восстановление DOM one node за раз) настолько смешны, что я даже не собираюсь туда.

Иногда document.write - это то, что нужно использовать. Тот факт, что он является одним из самых старых методов в JavaScript, не является противным моментом, но точка в его пользу - это высоко оптимизированный код, который делает именно то, что он должен был делать и делал с момента его создания.

Приятно знать, что существуют альтернативные методы пост-нагрузки, но следует понимать, что они предназначены для другой цели целиком; а именно изменение DOM после его создания и выделение памяти. Для использования этих методов более интенсивно использовать ресурсы, если ваш script предназначен для написания HTML-кода, с которого браузер создает DOM в первую очередь.

Просто напишите это и дайте браузеру и интерпретатору выполнить эту работу. Это то, для чего они существуют.

PS: Я только что проверил, используя параметр onload в теге body, и даже в этот момент документ по-прежнему open и document.write() выполняет функции по назначению. Кроме того, нет заметной разницы в производительности между различными методами в последней версии Firefox. Конечно, есть тонна кеширования, вероятно, происходит где-то в стеке аппаратного/программного обеспечения, но это действительно так: пусть машина выполняет свою работу. Однако это может повлиять на дешевый смартфон. Ура!

Ответ 9

Вы можете комбинировать метод insertAdjacentHTML и свойство document.currentScript.

Метод insertAdjacentHTML() интерфейса Element анализирует указанный текст как HTML или XML и вставляет результирующие узлы в дерево DOM в указанной позиции:

  • beforebegin: перед самим элементом
  • afterbegin: только внутри элемента, перед его первым потомком.
  • 'beforeend': только внутри элемента, после его последнего потомка.
  • 'afterend': после самого элемента.

Свойство Document.currentScript возвращает элемент <script>, сценарий которого в данный момент обрабатывается. Лучшая позиция будет до начала - новый HTML будет вставлен перед самим <script>.

<script>
  document.currentScript.insertAdjacentHTML(
    'beforebegin', 
    'this is the document.write alternative'
);
</script>

Ответ 10

Я не уверен, что это будет работать точно, но я думал о

var docwrite = function(doc) {               
    document.write(doc);          
};

Это решило проблему с сообщениями об ошибках для меня.