Jquery中要如何创建多层级的元素和嵌套

Question

例如要动态创建元素实现下面的效果：

这边效果图的静态代码：

<div id="noaccievediv">
                <h3 style="padding-left: 10px;">今日新闻</h3>
                <ul class="media-list">
                    <li class="media" style="padding-top: 10px;padding-left: 10px;">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="img/2.jpg" style="width: 150px; height: 110px;"/>
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">信息图表：IT领域的发展和 工作的变迁</h4>
                            <div class="media">
                                <p>过去几十年在科技领域发生了翻天覆地的变化，虎嗅编译了这张微软服务器和云计算博客制作的信息图表，让我们来看一下
                                自IT行业诞生以来，这个行业都发生了些什么。
                                </p>
                                <p>
                                Miscrosoft 2017-06-02 11:08
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="media" style="padding-top: 10px;padding-left: 10px; padding-right: 10px;"><a class="pull-left" href="#"><img class="media-object" src="img/1.jpg" style="width: 150px; height: 110px;"/></a>
                        <div class="media-body">
                            <h4 class="media-heading">交通银行董事长牛锡明这样回应马云与郭广昌</h4>
                            <div class="media">
                                <p>他指出：第一，互联网金融的发展，怎样符合监管，这个问题需要解决。第二个，就是互联网金融的自我约束
                                    和自我风险控制机制，应该如何建立。
                                </p>
                                <p>
                                虎嗅 2017-06-02 11:08
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

我这边好像动态创建出错了。：

Answer 1

找个jquery的模板用吧，不用这么麻烦写一大堆的jquery template

arttemplate

Answer 2

// es6 模板字符串（使用反引号将字符串包裹起来）
 var html = `<li class="media" style="padding-top: 10px;padding-left: 10px;">
                <a class="pull-left" href="#">
                    <img class="media-object" src="img/2.jpg" style="width: 150px; height: 110px;"/>
                </a>
                <div class="media-body">
                    <h4 class="media-heading">信息图表：IT领域的发展和 工作的变迁</h4>
                    <div class="media">
                        <p>something...</p>
                        <p>
                        Miscrosoft 2017-06-02 11:08
                        </p>
                    </div>
                </div>
            </li>`;
 // or es5 字符串拼接
  var html = "<li class="media" style="padding-top: 10px;padding-left: 10px;">"
             + "<a class="pull-left" href="#">"
             + "<img class="media-object" src="img/2.jpg" style="width: 150px; height: 110px;"/>"
             + "</a>"
             + "<div class="media-body">"
             + "<h4 class="media-heading">信息图表：IT领域的发展和 工作的变迁</h4>"
             + "<div class="media">"
             + "<p>something...</p>"
             + "<p>Miscrosoft 2017-06-02 11:08</p>"
             + "</div></div></li>";
  $(html); // 创建了一个jquery对象
  $(document.body).append(html); // html字符串->jquery对象->DOM对象(?)，挂载到文档中

Answer 3

把可复用的部分抽出来做成模板

<script type="text/template" id="xxx">
    <li>
        xxxx
    </li>
</script>