我需要打印div并用Javascript在其中添加数组内容。我该怎么做？

我有一个像这样的潜水艇

    <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>

七月十日/
Lorem ipsum dolor sit amet，奉献精英。如果有人说，这是一种罪过，这是一种普遍的惩罚。

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

谢谢

试试看。您可以在脚本标记中编写HTML代码，并在JS代码中调用它们，并根据需要使用它们：

<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>

${title}
价格：${formatPrice（价格）}

用法：

$（“#bookTemplate”）.tmpl（books）.appendTo（“#bookContainer”）
试试看。您可以在脚本标记中编写HTML代码，并在JS代码中调用它们，并根据需要使用它们：

<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>


${title}
价格：${formatPrice（价格）}

用法：

$（“#bookTemplate”）.tmpl（books）.appendTo（“#bookContainer”）
您可以按如下方式执行此操作

在html中创建一个模板并使用css隐藏，创建一个div以显示我们将动态创建的所有项目列表

然后将所有需要的对象数据做成一个数组，用一个循环将其圈起来，并替换数据保持器

然后将新的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


使用js模板引擎有一种简单得多的方法google上有很多，但这说明了如何做到这一点，以及模板系统将如何有效地工作。
您可以按如下方式进行操作

在html中创建一个模板并使用css隐藏，创建一个div以显示我们将动态创建的所有项目列表

然后将所有需要的对象数据做成一个数组，用一个循环将其圈起来，并替换数据保持器

然后将新的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


使用js模板引擎有一种简单得多的方法google上有很多，但这说明了如何做到这一点以及模板系统的工作效率。
您尝试了什么？您希望以什么方式附加数组的内容？请举例说明。我相信这是可以做到的。只是需要一点澄清。有太多的div。我是JS新手，所以我还没有尝试过任何东西。无论如何，我在考虑用我的div的内容制作一个数组。然后使用foreach将内容附加到其中。一旦这样做了，我想再做一次，为了打印div的数组长度。问题是我还没有弄清楚如何添加它。您想在哪个div中追加？使用jQuery并不难。将div存储在变量->var foo=$（“#DivID”）中，然后创建元素->var elem=document.createElement（“p”）；并将该元素附加到foo变量->foo.append（elem）中@McMazalf你想做这样的事吗？如果数组=[1,2,3]；期望输出：122我做对了吗？您尝试了什么？您希望以什么方式附加数组的内容？请举例说明。我相信这是可以做到的。只是需要一点澄清。有太多的div。我是JS新手，所以我还没有尝试过任何东西。无论如何，我在考虑用我的div的内容制作一个数组。然后使用foreach将内容附加到其中。一旦这样做了，我想再做一次，为了打印div的数组长度。问题是我还没有弄清楚如何添加它。您想在哪个div中追加？使用jQuery并不难。将div存储在变量->var foo=$（“#DivID”）中，然后创建元素->var elem=document.createElement（“p”）；并将该元素附加到foo变量->foo.append（elem）中@McMazalf你想做这样的事吗？如果数组=[1,2,3]；期望输出：122我做对了吗？我试试看！谢谢，我试试看！非常感谢你。如此简单和有用！我可以给你一个两行模板引擎解决方案。但是，这类东西是无价的，你可以学到很多酷的东西，这将帮助你使用从这些简单的东西中学到的新技巧和技术构建更好的应用程序。使用jquery或更简单的方法可以消除学习。祝你好运，看看JS模板引擎吧，它们非常酷；谢谢它的工作原理类似于charmAnd，那么“打印”如何呢？+=这是表示html=html+模板的一种简短方式，我们正在将新模板项添加到构建项目列表的html字符串中。非常感谢。如此简单和有用！我可以给你一个两行模板引擎解决方案。但是，这类东西是无价的，你可以学到很多酷的东西，这将帮助你使用从这些简单的东西中学到的新技巧和技术构建更好的应用程序。使用jquery或更简单的方法可以消除学习。祝你好运，看看JS模板引擎吧，它们非常酷；谢谢它的工作原理类似于charmAnd，那么“打印”呢？只有3个+=是表示html=html+模板的一种简短方式，我们将新的模板项添加到构建项目列表的html字符串中。