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，请参阅片段：

＆＃13;

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;});

＆＃13;

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

＆＃13;

P.S。如果您有很多带有类名称网格的元素，而不是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'));

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

2 个答案: