如何在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

您可以将HTML块保存在HTML代码中的不可见容器(如a <script>)中,然后innerHTML在JS中使用它在运行时

例如:

var div = document.createElement('div');
div.setAttribute('class', 'someClass');
div.innerHTML = document.getElementById('blockOfStuff').innerHTML;
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."
</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和EOT; 必须对自己行,没有任何前面的空白.

使用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>

Answer 2

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>

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