jQuery动态创建元素

最新推荐文章于 2023-06-16 15:43:17 发布

翻译最新推荐文章于 2023-06-16 15:43:17 发布 · 1.2k 阅读

文章标签：

#jquery动态创建元素 #动态创建元素 #添加元素的方法 #jquery基本使用 #清空节点

web前端基础专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了使用jQuery进行动态元素创建的方法，包括$(这是一个a标签)创建元素，html()方法获取和设置内容，append()与prepend()在父元素中添加元素，after()与before()在兄弟节点间插入元素，以及clone()的使用与节点的清空和删除。

动态创建元素

创建方式

使用$(“这是一个a标签”)

html() 不传参数则获取标签内容，传参数为设置内容，同innerHtml。

添加元素方法

append()与appendTo() 同appendChild()方法，调用举例：
  $parentNode.append($node)同$node.appendTo($parentNode)
  同parentNode.appendChild(node)
表示在子元素最后增加node节点，方法由父元素调用。

如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去(原有元素删除)。

prepend()与prependTo() 由父元素节点调用，调用举例：
  $parentNode.prepend($node)同$node.prependTo($parentNode)
  同parentNode.insertBefore(node,parentNode.firstElementChild);
after()和insertAfter()

before()和insertBefort() 由兄弟节点调用，调用举例：
  A.after(B)同B.insertAfter(A) 表示A节点后面增加B节点
  A.before(B)同B.insertBefore(A) 表示A节点前面增加B节点    
clone() jQuery对象的clone方法都是深度克隆，也可以传入boolean参数，但是true表示克隆事件，false则不克隆事件。

清空节点

$n o d e . e m p t y () 同$ node.html("")，清空标签内容，但标签名仍在。empty()会清除标签事件所以推荐使用，html不会不建议使用。

$node.remove() 如果无参数或是传入可转为false的字符如undefined、NaN等则删除node自身，标签名都删除。如果传入参数则相当于传入filter，根据选择器删除node集合中匹配的节点。