javascript - 我需要在 Javascript 中打印 div 并在其中附加数组内容。我怎么做？

Question

我有一个像这样的div

    <div id="news" class="col-sm-6 col-md-4 col-lg-4 pb-70">
  <div class="post-prev-img">
      <a href="blog-single-sidebar-right.html"><img src="images/blog/post-prev-1.jpg" alt="img"></a>
    </div>

    <div class="post-prev-title">
      <h3><a href="blog-single-sidebar-right.html">TIME FOR MINIMALISM</a></h3>
    </div>

    <div class="post-prev-info">
      JULE 10<span class="slash-divider">/</span><a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel">JOHN DOE</a>
    </div>

    <div class="post-prev-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.
    </div>

    <div class="post-prev-more-cont clearfix">
      <div class="post-prev-more left">
        <a href="blog-single-sidebar-right.html" class="blog-more">READ MORE</a>
      </div>
      <div class="right" >
        <a href="blog-single-sidebar-right.html#comments" class="post-prev-count"><span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span></a>
        <a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel" class="post-prev-count"><span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span></a>
        <a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
          <span aria-hidden="true" class="social_share"></span>
        </a>
        <ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#"><span aria-hidden="true" class="social_facebook"></span></a>
          </li>
          <li><a href="#"><span aria-hidden="true" class="social_twitter"></span></a></li>
          <li><a href="#"><span aria-hidden="true" class="social_dribbble"></span></a></li>
        </ul>
      </div>
    </div>
</div>

我需要它作为我其他 div 的“骨架”。现在我想创建一个 for 并将数组的内容附加到其中，并打印 HTML 页面中的每个 div。我怎么做？

谢谢

Answer 1

您可以按如下方式执行此操作，

在你的html中创建一个模板并使用css #template隐藏，创建一个div来显示我们将动态创建的所有项目#list

<div id="list">
</div>

<div id="template">
<div class="col-sm-6 col-md-4 col-lg-4 pb-70">
  <div class="post-prev-img">
      <a href="blog-single-sidebar-right.html"><img src="{{img}}"  alt="img"></a>
    </div>

    <div class="post-prev-title">
      <h3><a href="blog-single-sidebar-right.html">{{name}}</a></h3>
    </div>

    <div class="post-prev-info">
      JULE 10<span class="slash-divider">/</span><a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel">JOHN DOE</a>
    </div>

    <div class="post-prev-text">
     {{info}}
    </div>

    <div class="post-prev-more-cont clearfix">
      <div class="post-prev-more left">
        <a href="blog-single-sidebar-right.html" class="blog-more">READ MORE</a>
      </div>
      <div class="right" >
        <a href="blog-single-sidebar-right.html#comments" class="post-prev-count"><span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span></a>
        <a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel" class="post-prev-count"><span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span></a>
        <a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
          <span aria-hidden="true" class="social_share"></span>
        </a>
        <ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#"><span aria-hidden="true" class="social_facebook"></span></a>
          </li>
          <li><a href="#"><span aria-hidden="true" class="social_twitter"></span></a></li>
          <li><a href="#"><span aria-hidden="true" class="social_dribbble"></span></a></li>
        </ul>
      </div>
    </div>
</div>
</div>

隐藏模板的 CSS

#template {
  display: none;
}

然后制作一个包含所有所需对象数据的数组，用循环将其圈起来并替换数据持有者。

然后将新的html插入到dom中

var assets= [
{

name: "Time for JS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.",
},
{

name: "Time for CSS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
},
{

name: "Time for HTML",
img: "http://via.placeholder.com/350x150",
link: "",
info:"consectetur adipisicing consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
}


];

var html=""

assets.forEach(buildTemplate);
document.getElementById("list").innerHTML=html;

function buildTemplate(item) {
var template = document.getElementById("template").innerHTML;
template = template.replace("{{name}}", item.name);
template = template.replace("{{info}}", item.info);
template = template.replace("{{img}}", item.img);
html+=template;
}

这里是实际操作，就是这么简单，没有 jquery 超快速硬编码 JS。

https://jsfiddle.net/5yeh38LL/

有一种更简单的方法使用 js 模板引擎，谷歌上有很多，但这演示了这是如何完成的以及模板系统如何有效地工作。