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

最新推荐文章于 2024-07-28 02:06:02 发布

原创最新推荐文章于 2024-07-28 02:06:02 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

jQuery 同时被 2 个专栏收录

8 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何通过JavaScript和jQuery在HTML页面中添加内容。主要讲解了如何在JavaScript中创建元素以及将其插入到HTML文档的具体方法，并通过实例展示了实际效果。

目的
在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>