javascript - 使用 javascript 注入(inject) 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。您可能甚至不需要这些类(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>