Лучший способ вставить html с помощью javascript

Ответ 1

Переместите всю вещь в переменную 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";

Ответ 2

Сохраняйте разметку отдельно от вашего кода:

Вы можете вставлять фрагменты 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>

Ответ 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>

Ответ 4

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

Синтаксис выглядит так:

<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 polyfill.

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

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

Ответ 9

Если вы живете в 2019 году и далее, читайте здесь.

В JavaScript es6 вы можете использовать строковые литералы для создания шаблонов.

создайте функцию, которая возвращает строковый/шаблонный литерал

function videoPlayerTemplate(data) {
    return '
        <h1>${data.header}</h1>
        <p>${data.subheader}</p>
        <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>
        <time id="currentTime">0:00</time>
        <time id="totalTime">0:00</time>
    '
}

Создайте объект JSON, содержащий данные, которые вы хотите отобразить

var data = {
     header: 'My video player',
     subheader: 'Version 2 coming soon'
}

добавьте это к любому элементу, который вам нравится

const videoplayer = videoPlayerTemplate(data);
document.getElementById('myRandomElement').insertAdjacentHTML("afterbegin", videoplayer);

Вы можете узнать больше о строковых литералах здесь