jQuery利用prop獲取當(dāng)前節(jié)點(diǎn)的html包含當(dāng)前節(jié)點(diǎn)


在開發(fā)過程中,jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼,并不包含當(dāng)前節(jié)點(diǎn)本身的代碼,然后我們有時(shí)候確需要,找遍jQuery api文檔也沒有任何方法可以拿到。

看到有的人通過parent().html(),如果當(dāng)前元素沒有兄弟元素還行,如果有那就行不通了。后臺(tái)實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決,而且非常簡(jiǎn)便,如下:

jQuery.prop("outerHTML");


<div class="test"><p>hello,歡迎來到JSONS社區(qū)!</p></div>
<script>
$(".test").prop("outerHTML");
</script>

輸出結(jié)果為:<div class="test"><P>hello,歡迎來到JSONS社區(qū)!</p></div>


因?yàn)樵鶭S DOM里有一個(gè)內(nèi)置屬性 outerHTML (看清大小寫哦,JS是區(qū)分大小寫的)用來獲取當(dāng)前節(jié)點(diǎn)的html代碼(包含當(dāng)前節(jié)點(diǎn)),所以用jQuery的prop()能拿到,經(jīng)過實(shí)驗(yàn)attr()方法是拿不到的,不信的話,大家也可以嘗試嘗試,謝謝。


當(dāng)然也有人用jQuery的 clone() 函數(shù)配合append() 來創(chuàng)建一個(gè)只有一個(gè)子元素的節(jié)點(diǎn),然后來拿節(jié)點(diǎn)的html,這樣也是可行的,但是代碼繁瑣。


原文鏈接:jQuery利用prop獲取當(dāng)前節(jié)點(diǎn)的html包含當(dāng)前節(jié)點(diǎn)