jQueryDom操作之创建节点

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

我叫阿狸猫

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

阅读量921

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9627495

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

创建节点:

使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。

注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个元素, 可以使用 $(“”) 或 $(“”), 但不能使用

$(“”) 或 $(“”)

创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
		 <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
		 <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
		 <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
		 

		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 
		 </ul>
		
	</body>
<script language="JavaScript">
	//在city下增加<li id="tj" name="tianjin">天津</li>节点	  

	//创建<li></li>

	//设置属性<li id="tj" name="tianjin"></li>

    //设置文本节点<li id="tj" name="tianjin">天津</li>

	//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下

</script>
</html>

答案：

<script language="JavaScript">
	//在city下增加<li id="tj" name="tianjin">天津</li>节点	  

	//创建<li></li>
	$li = $("<li/>");
	//设置属性<li id="tj" name="tianjin"></li>
	$li.attr("id","tj");
	$li.attr("name","tianjin");
    //设置文本节点<li id="tj" name="tianjin">天津</li>
	$li.text("天津1");
	//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下
	$("#city").append($li);
</script>

我叫阿狸猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryDom操作之创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个元素, 可以使用 $
复制链接

扫一扫

专栏目录