如何在JavaScript中動態添加div？

Question

我有以下代碼；

<div class="col l3 m6 w3-margin-bottom">
  <div class="display-container">
    <div class="w3-display-topleft w3-black w3-padding">Brick House</div>
    <img src="image.jpg" alt="House" style="width:99%">
  </div>
</div>

我希望能夠通過JavaScript代碼動態添加其倍數。 請我不是很精通JavaScript，任何幫助。

Answer 1

使用jQuery：

$(document).append('<div class="col l3 m6 w3-margin-bottom"> <div class="display-container"> <div class="w3-display-topleft w3-black w3-padding">Brick House</div> <img src="image.jpg" alt="House" style="width:99%"> </div> </div>');

Answer 2

在您的代碼中獲取對DOM元素的引用（無論是通過id，類名，標記名等），然后將其作為字符串附加到innerHTML屬性中：

let el = document.getElementById('id');
el.innerHTML += '
<div class="col l3 m6 w3-margin-bottom">
  <div class="display-container">
    <div class="w3-display-topleft w3-black w3-padding">Brick House</div>
    <img src="image.jpg" alt="House" style="width:99%">
  </div>
</div>
';

Answer 3

這是使用新模板字符串的簡單方法。

您甚至可以通過在模板字符串中添加${myVar}來放置變量值。

 // This is code that you can change let code = ` <div class="col l3 m6 w3-margin-bottom"> <div class="display-container"> <div class="w3-display-topleft w3-black w3-padding">Brick House</div> <img src="image.jpg" alt="House" style="width:99%"> </div> </div>`; // You can append it to an element in HTML document.getElementById('id').innerHTML+=code;