动态创建元素

$()函数的另外一个作用:动态创建元素。
示例:

var $spanNode = $(“<span>我是一个span元素</span>”);
var node = $(“#box”).html(“<li>我是li</li>”);

添加元素

在元素的最后一个子元素后面追加元素

append()

作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)
如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。
常用参数:htmlString 或者 jQuery对象
示例代码:

$(selector).append($node);//在$(selector)中追加$node
$(selector).append('<div></div>');//在$(selector)中追加div元素,参数为htmlString

appendTo()

作用:同append(),区别是:把$(selector)追加到node中去
$(selector).appendTo(node);

prepend()

作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

after()

作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);

before()

作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);

html创建元素

作用:设置或返回所选元素的html内容(包括 HTML 标记)
设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同

  • 动态创建元素
    $(selector).html(‘<span>传智播客</span>’);
  • 获取html内容
    $(selector).html();

清空元素

清空指定元素的所有子元素.

  • 没有参数:

$(selector).empty();
$(selector).html(“”);

  • “自杀” 把自己(包括所有内部元素)从文档中删除掉

$(selector).remove();

复制元素

  • 复制$(selector)所匹配到的元素
  • 返回值为复制的新元素
    $(selector).clone();
    总结:推荐使用html(“”)方法来创建元素或者html(“”)清空元素
Last modification:May 9, 2018
If you think my article is useful to you, please feel free to appreciate