如何在JavaScript中插入一大块超文本标记语言？
如何在JavaScript中插入一大块超文本标记语言？
提问于 2013-04-29 11:24:32
如果我有一个包含许多标签的HTML块，如何将其插入到JavaScript中？
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = 'HERE TOO MUCH HTML that is much more than one line of code';
document.getElementById('posts').appendChild(div);我怎么才能做对呢？
回答 7
Stack Overflow用户
发布于 2017-03-13 16:11:03
Template literals可能会解决您的问题，因为它将允许编写多行字符串和字符串插值功能。你可以在字符串中使用变量或表达式(如下所示)。以一种读者友好的方式插入批量html很容易。
我已经修改了有问题的例子，请看下面。我不确定与浏览器兼容的Template literals有多少。请在这里阅读有关Template literals的信息。
var a = 1, b = 2;
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = `
<div class="parent">
<div class="child">${a}</div>
<div class="child">+</div>
<div class="child">${b}</div>
<div class="child">=</div>
<div class="child">${a + b}</div>
</div>
`;
document.getElementById('posts').appendChild(div);.parent {
background-color: blue;
display: flex;
justify-content: center;
}
.post div {
color: white;
font-size: 2.5em;
padding: 20px;
}<div id="posts"></div>
Stack Overflow用户
发布于 2013-04-29 11:33:47
尽管这个问题的本质不精确，但这里是我的解释性答案。
var html = [
'<div> A line</div>',
'<div> Add more lines</div>',
'<div> To the array as you need.</div>'
].join('');
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = html;
document.getElementById('posts').appendChild(div);Stack Overflow用户
发布于 2013-04-29 11:33:45
如果我没有理解错的话，你在寻找一个多行的表示，为了可读性？在其他语言中，你想要像here-string这样的东西。Javascript可以做到这一点：
var x =
"<div> \
<span> \
<p> \
some text \
</p> \
</div>";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16270761
复制相关文章
相似问题