Подтвердить что ты не робот

Каков правильный способ написания HTML с помощью Javascript?

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

Почему это? и каков правильный путь?

4b9b3361

ОТВЕТЫ

Ответ 1

document.write() будет работать только во время первоначальной обработки страницы и создания DOM. Как только браузер дойдет до закрывающего тега </body> и DOM готов, вы больше не сможете использовать document.write().

Я бы не сказал, что использование document.write() верное или неправильное, это просто зависит от вашей ситуации. В некоторых случаях вам просто нужно document.write() выполнить задачу. Посмотрите, как Google Analytics вводится на большинство веб-сайтов.

После завершения DOM у вас есть два способа вставки динамического HTML (предполагая, что мы собираемся вставить новый HTML в <div id="node-id"></div>):

  • Используя innerHTML на node:

    var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');

  • Использование методов DOM:

    var node = document.getElementById('node-id');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('some dynamic html'));
node.appendChild(newNode);

Использование методов DOM API может быть пуристским способом делать вещи, но innerHTML доказано, что он намного быстрее и используется под капотом в библиотеках JavaScript, таких как jQuery.

Примечание. <script> должен находиться внутри тэга <body>, чтобы это работало.

Ответ 2

document.write() не работает с XHTML. Он выполняется после того, как страница закончила загрузку и делает не что иное, как запись строки HTML.

Поскольку фактическое представление в формате HTML в формате HTML является DOM, лучший способ обновить данную страницу - напрямую манипулировать DOM.

То, как вы это делали, - это программно создать ваши узлы, а затем привязать их к существующему месту в DOM. Для [примера надуманного] примера, предполагая, что у меня есть элемент div, поддерживающий атрибут ID в заголовке, тогда я мог бы ввести некоторый динамический текст, выполнив следующее:

// create my text
var sHeader = document.createTextNode('Hello world!');

// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);

// grab a reference to the div header
var divHeader = document.getElementById('header');

// append the new element to the header
divHeader.appendChild(spanHeader);

Ответ 3

  • Методы DOM, описанные Томом.

  • innerHTML, как упоминалось iHunger.

Методы DOM очень предпочтительны для строк для установки атрибутов и содержимого. Если вы когда-либо начинали писать innerHTML= '<a href="'+path+'">'+text+'</a>', вы на самом деле создаете новые уязвимости безопасности на разных сценариях на стороне клиента, что немного грустно, если вы потратили какое-то время на серверную сторону.

Методы DOM традиционно описываются как "медленные по сравнению с innerHTML. Но на самом деле это не вся история. Медленным является вставка большого количества дочерних узлов:

 for (var i= 0; i<1000; i++)
     div.parentNode.insertBefore(document.createElement('div'), div);

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

Установление существующего значения атрибута или текстовых данных node, с другой стороны, очень быстро; вы просто меняете указатель на строку и это. Это будет намного быстрее, чем сериализация родителя с помощью innerHTML, его изменение и повторная обработка его (и не потеряют ваши несертифицируемые данные, такие как обработчики событий, ссылки JS и значения формы).

Существуют методы для манипуляций с DOM без столь медленной ходьбы. В частности, обратите внимание на возможности cloneNode и используя DocumentFragment. Но иногда innerHTML действительно быстрее. Вы все равно можете получить лучшее из обоих миров, используя innerHTML, чтобы написать свою базовую структуру с заполнителями для значений атрибутов и текстового содержимого, которые затем затем заполняете с помощью DOM. Это избавит вас от необходимости писать собственную функцию escapehtml(), чтобы обойти проблемы с экранированием/безопасностью, упомянутые выше.

Ответ 4

Возможно, хорошая идея - использовать jQuery в этом случае. Он обеспечивает удобную функциональность, и вы можете делать такие вещи:

$('div').html('<b>Test</b>');

Посмотрите http://docs.jquery.com/Attributes/html#val для получения дополнительной информации.

Ответ 5

Вместо этого вы можете изменить innerHTML или outerHTML элемента на странице.

Ответ 6

Я не особенно хорошо разбираюсь в JavaScript или его лучших практиках, но document.write() вместе с innerHtml() в основном позволяет вам записывать строки, которые могут или не могут быть действительными HTML; это просто персонажи. Используя DOM, вы обеспечиваете правильный, совместимый со стандартами HTML, который будет препятствовать вашей странице взломать через плохой HTML.

И, как заметил Том, JavaScript выполняется после загрузки страницы; вероятно, было бы лучше начать первоначальную настройку вашей страницы с помощью стандартного HTML (через .html файлы или независимо от того, что делает ваш сервер [например, php]).

Ответ 7

Существует много способов написать html с JavaScript.

document.write полезен только тогда, когда вы хотите писать на страницу, прежде чем она загрузится. Если вы используете document.write() после загрузки страницы (при событии onload), она создаст новую страницу и перезапишет старый контент. Также он не работает с XML, включая XHTML.

С другой стороны, другие методы не могут использоваться до создания DOM (загрузка страницы), потому что они работают напрямую с DOM.

Эти методы:

  • node.innerHTML = "Независимо";
  • document.createElement( 'DIV'); и node.appendChild() и т.д.

В большинстве случаев node.innerHTML лучше, так как он быстрее, чем функции DOM. Большую часть времени он также делает код более читабельным и меньшим.

Ответ 8

Конечно, лучший способ - вообще не делать какого-либо тяжелого создания HTML в вашем JavaScript? Разметка, отправленная с сервера, должна содержать основную часть, которую вы затем можете манипулировать, используя CSS, а не грубую силу, удаляя/заменяя элементы, если это вообще возможно.

Это не применимо, если вы делаете что-то "умное", например, эмулируете систему виджетов.

Ответ 9

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

Что вы, возможно, захотите, это innerHTML.

Ответ 10

Я думаю, вы должны использовать вместо document.write API DOM JavaScript, например document.createElement, .createTextNode, .appendChild и тому подобное. Безопасный и почти перекрестный браузер.

ihunger outerHTML не является перекрестным браузером, он только IE.

Ответ 11

Используйте jquery, посмотрите, насколько это просто:

    var a = '<h1> this is some html </h1>';
    $("#results").html(a);

       //html
    <div id="results"> </div>