jQuery创建DOM节点

1、创建元素节点

  $(html)方法会根据传入的html标记字符串,创建一个DOM元素,并将这个DOM换成jquery对象返回。
      动态添加的新元素节点不会被自动添加到文档中。
      当创建单个元素时,要注意闭合标签和使用标准的xhtml格式。比如 $("<p></p>")   $("<p/>")。

2、创建文本节点

  在创建元素节点的时候直接把文本内容写进去$("<p>append内容</p>")。

3、创建属性节点

  创建属性节点与创建文本节点类似。

既然有创建节点那么就需要操作节点,整理了一下常用到的:插入节点、删除节点、复制节点、替换节点、包裹节点

  jQuery插入节点

  1、append()  向每个匹配的元素插入内容

  2、appendTo()  将内容追加到指定的元素中  颠倒了append操作

  3、prepend()   向每个匹配元素前置插入内容

  4、prependTo()  将内容前置到指定元素中

  5、after()  在每个匹配的元素后插入内容

  6、insertAfter()  将内容追加到指定的元素后

  7、before()   在每个匹配的元素前插入内容

  8、insertBefore()  将内容追加到指定的元素前

  jQuery删除节点

  1、remove()方法:从DOM中删除所有匹配的元素。这个方法返回的值是一个指向被删除节点的引用。

  2、detach()方法:从DOM中删除所有匹配的元素。不同于remove()方法的是:detach()方法能保留所有绑定的事件。

   3、empty()方法:清空节点里的内容。

  复制节点

  1、clone()方法:生成被选元素的副本,包含子节点、属性和文本。

  替换节点

  1、replaceWith()  将所有匹配的元素替换成指定的xhtml或DOM元素。

  2、replaceAll()  将指定的xhtml或DOM元素替换到匹配的元素。

  包裹节点

  1、wrap()  将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。

  2、wrapAll()  将所有匹配的元素用一个元素包裹起来    注:如果被包裹的多个元素之间有其它元素,其它元素会被放到包裹元素之后。

  3、wrapInner()  将匹配的元素的子内容用其它标记包裹起来。

  

时间: 2024-08-03 23:44:33

jQuery创建DOM节点的相关文章

jquery无限级创建DOM节点

代码实现: var data=[{"tag":"ul","attr":{"class":"ban_nav","id":"ban"}, "child":[ {"tag":"li", "child":[ {"tag":"a","attr&quo

jQuery基础之(四)jQuery创建DOM元素

利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript var oNewP2 = document.createElement("p"); var oTex

JS/jQuery判断DOM节点是否存在

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

jQuery创建DOM的方法

jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法,在 jQuery 1.4中,我们可以传递一个对象作为第二个参数. 这个参数接受一个属性的集合,这些可以传递给.attr() 方法.此外,一些event type(事件类型)能通过, 而且后面的jQuery方法能够调用: val, css, html, text, data, width, height, or offset.?1. [代码][JavaScript]代码   <!DOCTYPE html><html>&

由莫名其妙的错误开始---浅谈jquery的dom节点创建

有一个字符串是这样的:var s = '<html lang="en" class="js no-touch discourse-no-touch">'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></bo

jQuery操作DOM节点的相关方法

1.在指定节点内插入新节点 以下的内容都用于在打指定节点内添加新内容 1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容. 2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值. 3)        appendTo(selector)

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a

jQuery的DOM 节点操作

一.节点的操作 1.查找节点: var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=$(

jquery和DOM节点操作方法和属性记录

网上找了份jquery的操作节点方法清单.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A