JQueryDOM之创建节点

最新推荐文章于 2022-11-04 11:03:36 发布

雷蒙96

最新推荐文章于 2022-11-04 11:03:36 发布

阅读量383

点赞数

分类专栏： jQuery 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/weixin_41298721/article/details/87892659

版权

jQuery 专栏收录该内容

13 篇文章

订阅专栏

创建节点

创建元素节点

创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。
    先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，
    格式如下：
    $(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：
         $li1=$("<li></li>")
代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
         $("ul").append($li1); 
添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

创建文本节点

使用JQuery的$()同样能够创建文本节点，创建文本节点的JQuery代码如下：
　　　　  $li2=$("<li>菠萝</li>");
代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
         $("ul").append($li2);

创建属性节点

$li3=$("<li title='菠萝'>菠萝</li>");　
         代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
         $("ul").append($li3);

案例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DOM创建节点</title>
         <script src="../js/jquery-3.1.1.js"></script>
    <script>
    	$(function(){
    		//$(html):这个HTML代码我可以一次性创建元素节点，属性节点，文本节点
    		//创建一个li元素西瓜
    		$("#btn1").click(function(){
    			//返回值是对应的jquery对象
    			//1.创建了一个li元素西瓜
    			var $li=$("<li>西瓜</li>");
    			//2.把创建好的元素节点添加到ul中
    			$("ul").append($li);
    			
    			//创建一个li元素节点菠萝，并设置title属性值为菠萝
    			var $li1=$("<li title='菠萝'>菠萝</li>");
    			$("ul").append($li1);
    		})
        
    	})
    	
    </script>
</head>
<body>
    <h3>DOM树</h3>
    <p title="水果">你喜欢的水果是？</p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="桔子">桔子</li>
        <li title="香蕉">香蕉</li>
    </ul>
    <button id="btn1">创建元素节点</button>
</body>
</html>