JQuery动态创建、删除DOM元素

动态创建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')]

 

posted @ 2018-06-27 23:23  虫儿要吃草  阅读(1411)  评论(0)  编辑  收藏  举报