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代码中的不可见容器（如<script>）中，然后在JS中运行时使用其innerHTML

例如：

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

相关：

如果要在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; 必须在他们自己的行上，没有任何前面的空格。

使用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的数量。请在此处阅读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。见下文：

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 6

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

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

Answer 7

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

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

Answer 9

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

如何在JavaScript中插入大块HTML？

9 个答案: