JS&jQuery高级05（用append在html中插入元素）

来源：互联网发布：阿里云服务器怎么续费编辑：程序博客网时间：2024/05/22 17:29

目的
在JS中为html增加内容。

如何实现
1、在JS中创建元素；
2、把元素插入到html中。

举例：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body>    <div style="width: 100%;text-align: center;margin-top: 50px;">        <h1>斌叔的茶叶铺子</h1>    </div>    <hr>    <div style="width: 100%;text-align: center;">        <h3 style="color: grey;">所有茶叶</h3>    </div>    <div id="all_teas">    </div>    <script type="text/javascript">        $(document).ready(function(){        //创建要插入的元素：            var html='<div style="width: 333px；height:300px;float: left;text-align: center;margin-top: 10px 0;"><h1 style="margin:0;">hi</h1><p>价格：20元</p></div>'    //用append插入到html里id为“all_teas”的元素中。        $('#all_teas').append(html);    </script></body></html>

实际效果相当于：

<div id="all_teas">    <div style="width: 333px；height:300px;float: left;text-align: center;margin-top: 10px 0;"><h1 style="margin:0;">hi</h1><p>价格：20元</p></div>  </div>

阅读全文

0 0