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

如果您不需要对语法进行任何验证（这使得createElement()如此好），那么您可以始终默认只设置要插入的元素的innerHTML属性里面的标记。

就个人而言，我会坚持使用createElement()。它更加冗长，但这样做的事情要少得多。

Answer 6

您可以连接原始HTML字符串（小心转义文本并防止XSS漏洞），或者您可以重写jQuery（或类似的东西）

Answer 7

如果需要考虑性能，请远离innerHTML。您应该根据需要使用document.createElement()创建整个对象树，包括嵌套元素。

最后，使用一个语句将其附加到文档中，而不是很多语句。

在我多年来的非正式测试中，这将为您提供最佳性能（某些浏览器可能会有所不同）。

如果在变量中声明了HTML，它应该很简单并且用于非常特定的目的。通常，这不是正确的方法。

Answer 8

我有一种情况，我将文本传递到第三方库，但如果我的模型是私有，我想在文本中添加一个元素。

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

这会产生第三方库构建其标记的方式的问题。

这绝不是一个好主意，但第三方图书馆在那里，所以我们不必自己写一切。在这种情况下，你必须依靠通过javascript传递标记。

当我找到合适的解决方案时，我会给你一个更新

Answer 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);

您可以了解有关字符串文字here

的更多信息

使用javascript注入html的最佳方法

9 个答案: