Что такое правильный способ, чтобы написать HTML с использованием JavaScript?

document.write() не работает с XHTML. Он выполнен после страница закончила загрузку и не делает ничего, кроме записи строки 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);

1. методы DOM, как описано Томом.

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

методы DOM очень предпочтительны для строк для установки атрибутов и содержимого. Если вы когда-нибудь окажетесь писать!--1--> вы фактически создаете новые межсайтовые скриптовые дыры безопасности на стороне клиента, что немного грустно, если вы потратили какое-то время на защиту своей серверной стороны.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

эти методы:

• узел.innerHTML = "что угодно";
• документ.createElement ('div'); и узел.appendChild () и др..

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

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

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

element.InnerHtml= allmycontent: перепишет все внутри элемента. Вы должны использовать переменную let allmycontent="this is what I want to print inside this element"хранить весь контент, который вы хотите внутри этого элемента. Если вы не будете каждый раз вызывать эту функцию, содержимое вашего элемента будет удалено и заменено последним вызовом, который вы сделали из него.

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

но знайте:документ.напишите () метод только полезно для вставки содержимого при создании страницы . Поэтому используйте его для того, чтобы не повторяться, когда у вас много данных для записи, как каталог продуктов или изображений.

вот простой пример: все ваши li для вашего меню в сторону хранятся в массиве "tab", вы можете создать сценарий js с тегом сценария непосредственно на html-странице, а затем использовать метод записи в итерационной функции, где вы хотите вставить эти li на странице.

<script type="text/javascript">
document.write("<ul>");
for (var i=0; i<=tab.length; i++){
    document.write(tab[i]);
    }document.write("</ul>");
</script>`

это работает, потому что Js интерпретируется в линейной способом во время погрузки. Поэтому убедитесь, что ваш скрипт находится в нужном месте на вашей html-странице.Вы также можете использовать внешний файл Js, но опять же вы должны объявить его в том месте, где вы хотите, чтобы он был интерпретирован.

по этой причине документ.пиши не может быть вызван для записи что-то на Вашей странице в результате "взаимодействие с пользователем" (как щелчок или hover), потому что тогда DOM был создан и метод записи будет, как сказано выше, писать новую страницу (очистить фактический стек выполнения и запустить новый стек и новое дерево DOM). В этом случае используйте:

element.innerHTML=("Myfullcontent");

чтобы узнать больше о методах документа: откройте консоль: document; затем откройте: __proto__: HTMLDocumentPrototype

вы увидите свойство функции "write" в объекте документа. Вы также можете использовать документ.writeln добавить новую строку в каждой инструкции. Учить подробнее о функции / методе, просто напишите его имя в консоль без скобок:document.write; Консоль будет возвращать описание вместо вызова его.

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

Что вы, вероятно, хотите-это innerHTML.

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

ihunger этоouterHTML это не кросс-браузер, это только IE.

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

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

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