JQuery动态创建、删除DOM元素

最新推荐文章于 2021-11-25 00:17:04 发布

weixin_30701521

最新推荐文章于 2021-11-25 00:17:04 发布

阅读量532

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/2mei/p/9236545.html

本文介绍了如何使用jQuery进行DOM节点的动态创建与删除操作。包括使用$(html字符串)创建节点，利用append、prepend、after及before等方法添加节点，以及通过remove和empty方法删除节点。并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态创建Dom节点

1.使用$(html字符串)来创建Dom节点

2.append方法用来在元素的末尾追加元素

3.prepend，在元素的开始添加元素。 prependTo。after，在元素之后添加元素（添加兄弟）。before：在元素之前添加元素（添加兄弟）。

删除节点

（1）remove()删除选择的节点

（2）empty()是将节点清空，清除节点的innerHTML，节点还在

动态创建Dom节点示例：

1.使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到其他节点（元素）中：

var link = $("<a href='http://www.baidu.com'>百度</a>");
                $("div:first").append(link);

$()创建的就是一个jQuery对象，可以完全进行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");
                link.text("百毒");
                $("div:first").append(link);

2，例动态创建img标签

有几种方法  但都需要你指定一个节点  根据这个节点进行添加  如现有一节点Id为pr：
一，向该节点内部后方添加：
1  $("#pr").append("<img src=''/>");
2  $("<img src=''/>").appendTo("#pr");
二，向该节点内部前方添加：
1  $("#pr").prepend("<img src=''/>");
2  $("<img src=''/>").prependTo("#pr");
三，向该节点同级后方添加：
1  $("#pr").after("<img src=''/>");
2  $("<img src=''/>").insertAfter("#pr");
四，向该节点同级前方添加：
1  $("#pr").before("<img src=''/>");
2  $("<img src=''/>").insertBefore("#pr");
代码示例1： 
1，点击按扭，
2，使用jquery创建一个img标签，使用jquery对象的attr方法设置属性，
3，并将创建的dom元素，添加到指定元素的后面

<body>
<script src="/static/jquery-3.3.1.js"></script>
<h1 id="d1">xxxxxxxxxxxx</h1>

<script>
  $('#b2').on('click',function(){
      $.ajax({
        // url:'/test/',
        // type:'get',
        success:function(a){
          //在页面上创建一个标签
          var myimg=$("<img>").attr('src','/static/1.jpg')
          $('#d1').append(myimg)
        }
      })
  })
</script>
</body>

# 要让img图片显示，此配置必不可少（因为img是URL形式的）
STATIC_URL = '/static/'
# 以下是指定静态目录的路径（这个是争对css,js文件路径的配置）
STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

转载于:https://www.cnblogs.com/2mei/p/9236545.html