JQuery笔记5-创建元素和添加元素

最新推荐文章于 2023-04-09 09:23:01 发布

blog12138

最新推荐文章于 2023-04-09 09:23:01 发布

阅读量245

点赞数

分类专栏： JQ 文章标签： jquery

本文链接：https://blog.csdn.net/Zzzpiu/article/details/110291644

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建元素

原生的js中的创建元素有三种方式:
1.1 document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
1.2 innerHTML
1.3 document.createElement("标签的名字");然后使用appendChild()方法添加到页面
jQuery中创建元素的方式:
2.1 $(“标签的代码”)
2.2 对象.html(“标签的代码”);

添加元素

常用的五种方式:
注意append和appendTo的区别:
append方法把元素添加到另一个元素中的时候,有点剪切的效果,append是主动的关系,dv2主动要添加dv>p,而appendTo是被动关系:意思是a被添加到b中

append添加到dv中 $("#dv").append(Obj);
插入到dv前面: $("#dv").prepend(Obj);
把元素添加到当前元素的后面(兄弟元素来添加): $("#dv").after(Obj);
把元素添加到当前元素的前面(兄弟元素来添加): $("#dv").before(Obj);
在dv2中添加一个p使用appendTo来写:var p = $("<p>这是一个p</p>"); $(p).appendTo("#dv2");

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建元素的方法</title>
    <script src="../jquery-1.12.2.js"></script>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin-top: 20px;
        }
    </style>
    <script>
        /*
        *
        * DOM中创建元素:
        * 1.document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
        * 2.innerHTML
        * 3.document.createElement("标签的名字");然后使用appendChild()方法添加到页面
        *
        * jQuery中创建元素的方式:
        * 1.$("标签的代码")
        * 2.对象.html("标签的代码");
        *
        * */
    </script>
    <script>
        //需求:1.点击按钮,在div中创建一个超链接
        //2.将dv中的p添加到dv2中去
        $(function () {
           var i = 0;
           $("#btn").click(function () {
               i++;
               //创建元素
               var Obj = $("<a href='http://www.baidu.com'>百度</a>");
               //添加元素
               //1.添加到dv中
               // $("#dv").append(Obj);
               //2.插入到dv前面
               // $("#dv").prepend(Obj);
               //3.把元素添加到当前元素的后面(兄弟元素来添加)
               // $("#dv").after(Obj);
               //4.把元素添加到当前元素的前面(兄弟元素来添加)
               $("#dv").before(Obj);
               //append方法把元素添加到另一个元素中的时候,有点剪切的效果
               //append是主动的关系,dv2主动要添加dv>p
               $("#dv2").append($("#dv>p"));//注意添加的是一个jq对象,而不是字符串
               //5. 在dv2中添加一个p使用appendTo来写:
               var p = $("<p>这是一个p</p>")
               $(p).appendTo("#dv2");
           });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="创建元素" />
<div id="dv"><p>这是一个div</p></div>

<div id="dv2"></div>
</body>
</html>

blog12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记5-创建元素和添加元素

创建元素原生的js中的创建元素有三种方式:1.1 document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉1.2 innerHTML1.3 document.createElement("标签的名字");然后使用appendChild()方法添加到页面jQuery中创建元素的方式:2.1 $(“标签的代码”)2.2 对象.html(“标签的代码”);添加元素常用的五种方式:注意append和appendTo的区别:append方
复制链接

扫一扫