jQuery基础_DOM节点操作

1,创建节点

    $("<html></html>"); 
如:$("<p id='name'><a href='##'/></p>");

2,插入节点

增加环绕节点
方法 说明 
wrap()  用指定结构的元素包裹元素
wrapAll() 用指定结构的元素包裹多个元素
wrapInner() 用指定结构元素包裹元素的内容

 

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
			}
			p{
				background:yellow; accelerator;
				margin: 4px;
			}
		</style>
	</head>
	
	<body>
		<p>Hello</p>
		<p>cruel</p>
		<p>World</p>
		<script type="text/javascript">
		//warp() 包裹着指定元素
		$("p").wrap("<div></div>");
		//wrapAll() 将元素一起包裹 注:如果是不连续的元素 会吧中间隔开的元素挤到最下面
		$("p").wrapAll("<div></div>");
		//wrapInner()
		$("p").wrapInner("<b></b>");
		</script>
	</body>
</html>

2,节点内部插入

节点内部插入
方法 说明
append() 向每个匹配元素内部的最后面添加元素
appendTo()  将所有匹配的元素追加到指定的元素中
prepend() 向每个匹配的元素内部最前面添加指定元素
prependTo() 将所有匹配的元素添加到指定元素内部的最前面

    

		
    append();//前者为已有父元素  后者为需要添加到父元素的子元素
        $("#demo").append($("<p>aaa</p>"));

appendTo();//前者为需要添加到父元素的子元素 后者为指定的父元素 $($("<p>bbb</p>")).appendTo($("#demo"));

  

  //与上面同理 只是这个是添加到最前面
  prepend()
   $("#demo").prepend($("<p>ccc</p>"));
  prependTo()
    $($("<p>ddd</p>")).prependTo($("#demo"));

  

猜你喜欢

转载自www.cnblogs.com/NiuBiHH/p/9116378.html