使用JavaScript（JQuery）创建嵌套的HTML div元素

Question

知道如何使用JavaScript或JQuery创建以下div结构，然后我想将此结构附加到具有class =“ grid”的div上

<div class="grid-item grid-item--width">
 <div class="card">
   <div class="card-body">
      <div class="d-flex flex-row justify-content-between">
        <div>
           <p class="h5">User Name</p>
           <p class="h5">Level</p>
        </div>
        <div>
           <p class="h5">Category</p>
        </div>
     </div>
    <img class="card-img-bottom" src="hands.jpg"
    alt="Card image cap" style="width:344px">
    <p class="card-text">This is a wider card</p>
    <div class="d-flex flex-row justify-content-between">
       <div>
         <p class="h5">Location</p>
       </div>
       <div>
         <p class="h5">Life Time</p>
       </div>
    </div>
   </div>
   </div>
 </div> 

感谢任何帮助

Answer 1

纯JS是最快的方法，只需从所有必需的html代码中创建一个字符串，然后将其附加到所需元素的innerHTML即可，请参见代码段：

 var divend = '</div>'; var divstart = '<div>'; var pclass5 = '<p class="h5">'; var pend = '</p>' var grid_item = '<div class="grid-item grid-item--width"><div class="card"><div class="card-body">'+ '<div class="d-flex flex-row justify-content-between">' + divstart+ pclass5+'User Name'+pend+ pclass5+ 'Level'+pend+ divend+ divstart+ pclass5+'Category'+pend + divend + divend+ '<img class="card-img-bottom" src="hands.jpg" alt="Card image cap" style="width:344px">'+ '<p class="card-text">' + 'This is a wider card'+ pend+ '<div class="d-flex flex-row justify-content-between">'+ divstart+ pclass5+'Location'+pend+ divend+ divstart+ pclass5+'Life Time'+pend+ divend+ divend+ divend+ divend+ divend; var grids = document.getElementsByClassName('grid'); // add for all elements with class == grid [...grids].forEach(grid=>{grid.innerHTML += grid_item;}); 

 <div class='grid'></div> 

ps，如果您有很多带有类名称网格的元素，而不是forEach ，请使用常规的for(){}循环，根据浏览器的不同，它的性能大约要快两倍。

Answer 2

jQuery .append（）和他的家人[appendTo（），.prepend（）]是您的朋友。

var
new_HTML_cod = "<div class=\"grid-item grid-item--width\">";
new_HTML_cod += " <div class=\"card\">";
new_HTML_cod += "  <div class=\"card-body\">";
//...
$(new_HTML_cod).appendTo($('.grid'));