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\')]