国产视频appjavascript中的jquery的強大毋容置疑,但我們平時使用jq都是操作一些指定元素的子元素啥的,比如修改子元素的內容,獲取子元素的內容等等。一般平時很少用利用JQ獲取指寫元素本身的HTML代碼。今天遇到這個問題,并順利解決,寫個文章記錄一下。

国产视频appjQuery中的html()方法是獲取指定元素的子元素的HTML代碼,但無法獲取本身的DOM節點的HTML代碼。但如果我們在特殊場合下有需要的要獲取元素本身的DOM節點的HTML代碼,可以使用prop("outerHTML")來獲取。

国产视频app原生javascript的DOM方法里面有一個內置的屬性outerHTML(區分大小寫的)可以用來獲取當前節點的HTML代碼,在JQ中的我們可以使用prop()這個方法來獲取這個屬性的值,也可以改變這個屬性的值

jq獲取元素本身的HTML代碼

代碼:

HTML代碼

<div id="mochu"><span>飛鳥慕魚博客</span></div>

jq代碼

var html = $('#mochu').prop("outerHTML");
console.log(html);

打印結果

<div id="mochu"><span>飛鳥慕魚博客</span></div>

jq修改本身節點的HTML代碼

HTML代碼

<div id="mochu"><span>飛鳥慕魚博客</span></div>

JQ代碼

html = '<div id="mochu"><span>墨初的個人博客:飛鳥慕魚</span></div>';
$('#mochu').prop("outerHTML", html);
var htmls = $('#mochu').prop("outerHTML");
console.log(htmls);

打印結果

<div id="mochu"><span>墨初的個人博客:飛鳥慕魚</span></div>

利用jquery獲取自身元素的html代碼

瀏覽器右鍵盤查看源碼

利用jquery獲取自身元素的html代碼

瀏覽器控制臺查看源碼

注意:這里通過JQ修改后的元素,因為其為動態元素,只能在瀏覽器的控制臺中查看到元素節點的變化,在瀏覽器右鍵查看是不變的