是否可以使用 javascript 将一组 html 附加到 html 页面?

Question

我试图做到这一点，以便我可以在下面附加这个html：

<div  class="col-md-6 col-lg-5 wow bounceInUp" data-wow-duration="1.4s">
<div class="box">
<div class="icon"><i class="fa fa-check" style="color: #ff5100;"></i></div>
<h4 class="title"><a href="">Title Of Box</a></h4>
<p class="description">Description Of Box</p>
</div>
</div>

我试图在 html 页面中多次附加该代码，但我找不到方法，iv 花了 4 个小时查找这个，没有发现任何:(

Answer 1

是的，您需要几个零件。一个简单的例子：

var stuff = '<div  class="col-md-6 col-lg-5 wow bounceInUp" data-wow-duration="1.4s">'+
'<div class="box">'+
' <div class="icon"><i class="fa fa-check" style="color: #ff5100;"></i></div>'+
'<h4 class="title"><a href="">Title Of Box</a></h4>'+
'<p class="description">Description Of Box</p>'+
'</div>'+
'</div>'

var add = function(){

document.getElementById('container').innerHTML += stuff;
}

<div id="container"></div>
<button type="button" onclick="add()">add </button>

假设上面的香草Js：

但是变量的东西是一个字符串。

在某些事件中，在这种情况下，单击按钮，我们获取该字符串并将该字符串附加到 dom 元素。

我使用元素 ID 作为选择器，但您也可以使用类、事件来获取父元素或同级元素等。

然后使用innerHtml将字符串追加(或根据需要替换(到 DOM 中。

Answer 2

您可以使用Element.prototype.insertAdjacentHTML.

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 退房。(请注意，MDN 将在今天晚些时候停机维护长达一个小时。

const myContainer = document.getElementById("some-element");
const myNewHtml = "<div><span>Inserted by JS</span></div>";
myContainer.insertAdjacentHTML("beforeend", myNewHtml);

<div id="some-element">
<span>Static content</span>
</div>

编辑
注意：一个常见的替代方案是完全用JavaScript构建HTML，使用createElement，createTextNode和appendChild方法。
(我认为这种更复杂的技术很常见的原因是 - 虽然插入带有insertAdjacentHTML的预先编写的HTML字符串非常方便 - 如果你预先编写的HTML没有正确编写，你不会看到任何错误消息，直到你的脚本在运行时失败或只是将一个无意义的字符串插入你的页面。