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

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

我该怎么做才对？

128910 次浏览
小开

这个答案不使用反勾/模板文字/模板字符串(``) ，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-doc 还是其他大引用机制？

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


?>

以下是可以在浏览器中运行的上述代码的 PHP 小提琴演示。

需要注意的一点是: <<<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 的简单形成对比。

小开

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

如果我没理解错的话，你是在寻找一个多行表示，为了可读性？你想在其他语言中使用类似于 here-string 的词。Javascript 可以接近这一点:

var x =
"<div> \
<span> \
<p> \
some text \
</p> \
</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);
小开

如果你使用的是同一个域名，那么你可以创建一个独立的 HTML 文件，然后使用@Stano 提供的答案中的代码导入该文件:

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

小开

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>

小开

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

到目前为止，最简单的方法是使用 Insert tAdjacentHTML ()方法。 W3Schools 的文章

小开

只要确保将大型代码像包装器一样包装到一个 DIV 中，那么它的长度就无关紧要了。

HTML:

<div id='test'></div>

约翰逊:

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

提交答案