如果我有一个带有许多标签的 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);
我该怎么做？
此答案不使用``Internet Explorer 不支持的反引号/模板文字/模板字符串 ( )。
您可以将 HTML 块保存在<script>HTML 代码中的不可见容器（如 a ）中，然后innerHTML在运行时在 JS 中使用它
例如：
// Create a temporary <div> to load into
var div = document.createElement('div');
div.setAttribute('class', 'someClass');
div.innerHTML = document.getElementById('blockOfStuff').innerHTML;
// You could optionally even do a little bit of string templating
div.innerHTML = div.innerHTML
.replace(/{VENDOR}/g, 'ACME Inc.')
.replace(/{PRODUCT}/g, 'Best TNT')
.replace(/{PRICE}/g, '$1.49');
// Write the <div> to the HTML container
document.getElementById('targetElement').appendChild(div);.red {
color: red
}<script id="blockOfStuff" type="text/html">
Here's some random text.
<h1>Including HTML markup</h1>
And quotes too, or as one man said, "These are quotes, but
'these' are quotes too."<br><br>
<b>Vendor:</b> {VENDOR}<br>
<b>Product:</b> {PRODUCT}<br>
<b>Price:</b> {PRICE}
</script>
<div id="targetElement" class="red"></div>来自这个答案的想法：JavaScript HERE-doc 或其他大型引用机制？
如果要在 PHP 中插入特别长的 HTML 块，可以使用 Nowdoc 语法，如下所示：
<?php
$some_var = " - <b>isn't that awesome!</b>";
echo
<<<EOT
Here's some random text.
<h1>Including HTML markup</h1>
And quotes too, or as one man said, "These are quotes, but 'these' are quotes too."
<br><br>
The beauty of Nowdoc in PHP is that you can use variables too $some_var
<br><br>
Or even a value contained within an array - be it an array from a variable you've set
yourself, or one of PHP's built-in arrays. E.g. a user's IP: {$_SERVER['REMOTE_ADDR']}
EOT;
?>
这是您可以在浏览器中运行的上述代码的 PHP Fiddle 演示。
需要注意的一件重要事情：<<<EOT andEOT; 必须在自己的行中，前面没有任何空格！
与通常的启动和停止 PHP 标记相比，使用 Nowdoc 语法的一大优势是它支持变量。考虑一下正常的做法 - 如下例所示：
<?php
// Load of PHP code here
?>
Now here's some HTML...<br><br>
Let's pretend that this HTML block is actually a couple of hundred lines long, and we
need to insert loads of variables<br><br>
Hi <?php echo $first_name; ?>!<br><br>
I can see it's your birthday on <?php echo $birthday; ?>, what are you hoping to get?
<?php
// Another big block of PHP here
?>
And some more HTML!
</body>
</html>
将其与 Nowdoc 的简单性进行对比。
Template literals可能会解决您的问题，因为它将允许编写多行字符串和字符串插值功能。您可以在字符串中使用变量或表达式（如下所示）。以读者友好的方式插入批量 html 很容易。
我已经修改了有问题的示例，请在下面查看。我不确定浏览器兼容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>尽管问题的性质不精确，但这是我的解释性答案。
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);
如果我理解正确，您正在寻找多行表示，以提高可读性？您想要其他语言中的 here-string 之类的东西。Javascript可以接近这个：
var x =
"<div> \
<span> \
<p> \
some text \
</p> \
</div>";
插入 html 块的最简单方法是使用模板字符串（反引号）。它还允许您通过 ${...} 插入动态内容：
document.getElementById("log-menu").innerHTML = `
<a href="#">
${data.user.email}
</a>
<div class="dropdown-menu p-3 dropdown-menu-right">
<div class="form-group">
<label for="email1">Logged in as:</label>
<p>${data.user.email}</p>
</div>
<button onClick="getLogout()" ">Sign out</button>
</div>
`
将每一行代码添加到一个变量中，然后将该变量写入您的内部 HTML。见下文：
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
var str = "First Line";
str += "Second Line";
str += "So on, all of your lines";
div.innerHTML = str;
document.getElementById('posts').appendChild(div);
如果您在同一个域上使用，那么您可以创建一个单独的 HTML 文件，然后使用 @Stano 的此答案中的代码导入它：
只要确保将您的大代码包装成一个单独的 DIV 就像一个包装器，那么它有多长并不重要。
HTML：
<div id='test'></div>
JS：
const arr = ['one', 'two', 'three'];
let mapped = arr.map(value=> {
return `
<div>
<hr />
<h1>${value}</h1>
<h3>this is it</h3>
</div>
`
});
document.querySelector('#test').innerHTML = mapped.join('');
到目前为止，最简单的方法是使用insertAdjacentHTML()方法。 w3schools 文章