javascript及jQuery获取html标签

第一部分：javascript获取html标签

例如：如下的代码

		<div id="div">
			<div id="div1">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>
		</div>

现在想获取的是如下结构：

			<div id="div1">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>

js方法如下：

		
		<script type="text/javascript">
			var Odiv=document.getElementById("div1")；
（1）			var text=Odiv.innerText;
（2）			var html=Odiv.innerHTML;
（3）			var html1=Odiv.outerHTML;
			console.log(text);
			console.log(html);
			console.log(html1);
		</script>




得到的结果依次是：

（1）------你猜猜

（2）------

<a href="#">
	<span>你猜猜</span>
</a>

（3）------

			<div id="div1">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>

由上边结构可知：方法（3）可以得到我想要的结果；注意：outerHTML的大小写

第二部分：jQ获取html标签

(1)  代码如下（同上）

		<div id="div">
			<div id="div1">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>
		</div>

		<script type="text/javascript">
			var Odiv1=$("#div1").text();
			var Odiv2=$("#div1").html();
（1）---------		console.log(Odiv1)
（2）---------		console.log(Odiv2)
		</script>

得到的结果依次是（1）----"你猜猜”

（2）----

				<a href="#">
					<span>你猜猜</span>
				</a>

由此可见方法（1），（2）都无法得到我想要的结果

后来经过一番查阅后得知用属性选择器attr(),或者prop(),来尝试一下

代码如下：

		<script type="text/javascript">
			var Odiv1=$("#div1").prop("outerHTML");
			var Odiv2=$("#div1").attr("outerHTML");
（i）-------		console.log(Odiv1)
（ii）------		console.log(Odiv2)
		</script>

得到结果 如下：（i）----

			<div id="div1">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>

（ii）----得到结果是undefined
由此可知：方法（i）可以得到我想要的结果 -->( 关于Jquery的attr()与prop()方法的区别后续再写)

(2)在查阅的过程中了解到了jquery的wrap(),wrapAll()方法

在此处我也进行验证一番：代码如下：：：

		<div id="div">
			<div class="dd">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>
			<div class="dd">
				<a href="#">
					<span>猜到了吗</span>
				</a>
			</div>
		</div>
		<script type="text/javascript">
（一）-----------	var Odiv1=$(".dd").eq(0).wrap("<div style='background: red;'></div>");
			var html=Odiv1.parent().html();
（二）------------------->	console.log(html)
				$(".dd").eq(0).unwrap()
		</script>

(二)得到了我想要的结果:

			<div class="dd">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>

(一)wrap()方法是在被选中的元素外边创建一个html标签用以包裹它（此处为div）

		<div id="div">
			<div style="background: red;">

				<div class="dd">
					<a href="#">
						<span>你猜猜</span>
					</a>
				</div>

			</div>
			<div class="dd">
				<a href="#">
					<span>猜到了吗</span>
				</a>
			</div>
		</div>

注意：：：用wrap（）；方法实现结果后记得用unwrap()方法去掉包裹的div

wrap()方法会将所选择的所有标签每一个的外边都添加一个包裹的html元素

wrapAll()方法得代码如下：：：

（i）先说下该方法的使用；

		<div id="div">
			<div class="dd">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>
			<p>
				aaa
			</p>
			<div class="dd">
				<a href="#">
					<span>猜到了吗</span>
				</a>
			</div>
		</div>
		<script type="text/javascript">
			var Odiv1=$(".dd").wrapAll("<div style='background: red;'></div>");	
		</script>

得到的结果如下：：

		<div id="div">
			<div style="background: red;">

				<div class="dd">
					<a href="#">
						<span>你猜猜</span>
					</a>
				</div>

				<div class="dd">
					<a href="#">
						<span>猜到了吗</span>
					</a>
				</div>

			</div>
			<p>
				aaa
			</p>
			
		</div>

wrapAll()方法会将所有被选择的标签自动调整到了一起都用一个html元素包裹起来(此处为div);

先在说下如何使用wrapAll（）方法实现我想要的结果：：

		<div id="div">
			<div class="dd">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>
			<p>
				aaa
			</p>
			<div class="dd">
				<a href="#">
					<span>猜到了吗</span>
				</a>
			</div>
		</div>
		<script type="text/javascript">
			var Odiv1=$(".dd").eq(0).wrapAll("<div style='background: red;'></div>");
				var html=Odiv1.parent().html();
(1)------------------------->	console.log(html)
				//$(".dd").eq(0).unwrap()
		</script>

(1)得到了我想的结果如下：：

			<div class="dd">
				<a href="#">
					<span>你猜猜</span>
				</a>
			</div>

这就是我所知道的一些的获取html标签的方法，一定有不足之处，还望各位精英不吝指教，我会努力改进，谢谢