Лучший способ ввести HTML с использованием JavaScript

Question

Я надеюсь, что это не слишком субъективно.Я чувствую, что есть окончательный ответ, поэтому здесь идет.

Я хочу создать этот HTML на лету, используя JS (без библиотек):

<a href="#" id="playButton">Play</a>
<a href="javascript: void(0)" id="muteUnmute">Mute</a>
<div id="progressBarOuter"> 
  <div id="bytesLoaded"></div>
    <div id="progressBar"></div>
</div>
<div id="currentTime">0:00</div>
<div id="totalTime">0:00</div>

с использованием JavaScript.Я знаю, что могу сделать это, используя createElement и т. Д., Но кажется, что это очень долго для каждого элемента.Может кто-нибудь предложить способ сделать это с большей краткостью.

У меня нет доступа к библиотеке в этом проекте .... так что нет jquery и т. Д.

Answer 1

Держите разметку отдельно от кода:

Вы можете встроить фрагменты HTML, которые будете использовать в качестве скрытых шаблонов, в свою HTML-страницу и клонировать их по запросу:

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

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

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

В качестве альтернативы, вы можете воздействовать на HTML шаблона:

<script type="text/javascript">
var tmp = document.getElementById("tmp_audio").innerHTML;
// modify template HTML with token replacement
container.innerHTML += tmp;
</script>

Answer 2

Перенесите всю вещь в переменную JS:

var html = '<a href="#" id="playButton">Play</a>';
html += '<a href="javascript: void(0)" id="muteUnmute">Mute</a>';
html += '<div id="progressBarOuter"><div id="bytesLoaded"></div><div id="progressBar"></div></div>';
html += '<div id="currentTime">0:00</div>';
html += '<div id="totalTime">0:00</div>';

Затем:

document.getElementById("parentElement").innerHTML = html;

, если вы хотите, чтобыN:

document.getElementById("totalTime").innerHTML = "5:00";

Answer 3

Вы можете использовать

<script type="text/javascript">
    function appendHTML() {
        var wrapper = document.createElement("div");
        wrapper.innerHTML = '\
<a href="#" id="playButton">Play</a>\
<a href="javascript: void(0)" id="muteUnmute">Mute</a>\
<div id="progressBarOuter"> \
<div id="bytesLoaded"></div>\
    <div id="progressBar"></div>\
</div>\
<div id="currentTime">0:00</div>\
<div id="totalTime">0:00</div>\
';
        document.body.appendChild(wrapper);
    }
</script>

Answer 4

Теперь с Web Components вы можете вводить HTML, используя HTML import .

Синтаксис выглядит следующим образом:

<link rel="import" href="component.html" >

Это просто загрузит содержимое html-файла в атрибут href, встроенный в том порядке, в котором он появляется. Вы можете использовать любой допустимый HTML-код в загруженном файле, так что вы можете даже загрузить другие сценарии, если хотите.

Чтобы добавить это из JavaScript, вы можете сделать что-то вроде:

var importTag = document.createElement('link');
importTag.setAttribute('rel', 'import');
importTag.setAttribute('href', 'component.html');
document.body.appendChild(importTag);

На момент написания этой статьи Chrome и Opera поддерживают импорт HTML. С современной таблицей совместимости вы можете ознакомиться здесь http://caniuse.com/#feat=imports

Но не беспокойтесь о браузерах, не поддерживающих его, вы можете использовать его в любом случае с полифилом webcomponentsjs .

Для получения дополнительной информации об импорте HTML, проверьте http://webcomponents.org/articles/introduction-to-html-imports/

Answer 5

Если вам не нужна проверка вашего синтаксиса (что делает createElement() таким хорошим), вы всегда можете по умолчанию просто установить свойство innerHTML элемента, который вы хотите вставьте разметку внутри.

Лично я бы придерживался createElement(). Это более многословно, но беспокоиться об этом гораздо меньше.

Answer 6

Если производительность является проблемой, держитесь подальше от innerHTML. Вы должны создать все дерево объектов, используя document.createElement() столько раз, сколько необходимо, включая вложенные элементы.

Наконец, добавьте его в документ одним утверждением, а не несколькими утверждениями.

В моем неформальном тестировании на протяжении многих лет это даст вам наилучшую производительность (некоторые браузеры могут отличаться).

Если HTML когда-либо объявлен в переменной, он должен быть простым и для очень конкретной цели. Обычно это неправильный подход.

Answer 7

Вы можете объединить необработанные строки HTML (будьте осторожны, избегайте текста и не допускайте дыр в XSS), или вы можете переписать jQuery (или что-то подобное)

Answer 8

У меня есть ситуация, когда я передаю текст в стороннюю библиотеку, но если моя модель isPrivate, я бы хотел добавить элемент к тексту.

return { id: item.id, text: (item.isPrivate == true) ? "<i class=\"icon-lock\" title=\"Private group.\"></i> " + item.label : item.label };

Это создает проблемы с способомсторонняя библиотека создает свою разметку.

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

Когда я найду подходящее решение, я дам вам обновление