如何在 JavaScript 中插入一大块 HTML？

Question

如果我有一个带有许多标签的 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);

我该怎么做？

Answer 1

此答案不使用 Internet Explorer 不支持的反引号/模板文字/模板字符串 (``)。

---

使用 HTML + JavaScript：

您可以将 HTML 块保存在 HTML 代码中的不可见容器中（如 <script>），然后在运行时在 JS 中使用其 innerHTML

例如：

// 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 or other large-quoting mechanism?

---

使用 PHP：

如果你想在 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;

?>

这是您可以在浏览器中运行的上述代码的a PHP Fiddle demo。

需要注意的重要一点：<<<EOT 和 EOT; 必须在自己的行中，前面没有任何空格！

---

为什么在 PHP 中使用 Nowdoc？

与通常的启动和停止 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 的简单性相比。

Answer 2

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>

Answer 3

尽管问题的性质不精确，但这是我的解释性答案。

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

Answer 4

如果我理解正确，您正在寻找多行表示，以提高可读性？您想要其他语言中的 here-string 之类的东西。 Javascript 可以接近这个：

var x =
    "<div> \
    <span> \
    <p> \
    some text \
    </p> \
    </div>";

Answer 5

插入 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>
    `

Answer 6

将每一行代码添加到一个变量中，然后将该变量写入您的内部 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);

Answer 7

如果您在同一个域上使用，那么您可以创建一个单独的 HTML 文件，然后使用@Stano 此答案中的代码导入它：

https://stackoverflow.com/a/34579496/2468603

Answer 8

到目前为止，最简单的方法是使用 insertAdjacentHTML() 方法。 w3schools article

Answer 9

只要确保像包装器一样将你的大代码包装到一个单独的 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('');