使用javascript注入html的最佳方法

Question

我希望这不是太主观.我觉得这里有一个明确的答案.

我想使用JS(无库)动态创建这个html:

<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属性转换为属性.这是为了避免页面上的多个元素具有相同的ID.你甚至可能不需要这些课程.您可以访问元素:

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 .

语法如下所示:

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

这将只按内容href的顺序在内联属性中加载html文件的内容.您可以在加载的文件中使用任何有效的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/

Answer 5

如果您生活在 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);

您可以在此处阅读有关字符串文字的更多信息