Jquery基础教程之DOM操作

2020-05-23 06:24:09易采站长站整理

    2、创建文本节点

      使用JQuery的工厂函数$()同样能够创建文本节点,创建文本节点的JQuery代码如下:


$li2=$("<li>苹果</li>");

      代码返回$li2就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:      


$("ul").append($li2);

      添加后页面中能看到”·苹果”,右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。

    3、创建属性节点

      创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下:     


$li3=$("<li title='榴莲'>榴莲</li>");  

    

       代码返回$li3也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:      


$("ul").append($li3);

      添加后页面中能看到”·榴莲”,右键查看页面源码发现新加的属性节点有title=’榴莲’属性。

   三、增–添加DOM节点

      动态新建元素不添加到文档中没有实际意义,将新建的节点插入到文档中有多个方法,如下:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

    1、append()方法

      append()方法向匹配的元素内部追加内容, 方法如下:


$("target").append(element);

例:     


$("ul").append("<li title='香蕉'>香蕉</li>");

      该方法查找ul元素,然后向ul中添加新建的li元素。

    2、appendTo()方法

      appendTo()方法将所有匹配的元素追加到指定的元素中,该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。方法如下:$(element).appendTo(target);例:     


$("<li title='荔枝'>荔枝<li>").appendTo("ul");

      该方法新建元素li,然后把li添加到查找到的ul元素中。

    3、prepend()方法

      prepend()方法将每匹配的元素内部前置要添加的元素,方法如下:


$(target).prepend(element);

例:     


$("ul").prepend("<li title='芒果'>芒果</li>")