ใช้สำหรับแสดงข้อมูลจาก jQuery Object ออกมาเป็นแท็ก HTML สำหรับใช้งาน
เราสามารถใช้ outerHTML ได้ตามตัวอย่างด้านล่าง
เมื่อเราเรียกใช้
$("#ul_data"); // เราจะได้ jQuery Object
$("#ul_data").get(0); // เราจะได้ DOM elements เอาไว้ไปจัดการ
หรือ
$("#ul_data")[0]; // เราจะได้ DOM elements เอาไว้ไปจัดการ
$("#ul_data").get(0).outerHTML; // เราจะได้ HTML ไว้ไปใช้งาน
หรือ
$("#ul_data")[0].outerHTML; // เราจะได้ HTML ไว้ไปใช้งาน
โค้ดและตัวอย่าง
- data list 1
- data list 2
- data list 3
- data list 4
- data list 5
- data list 6
- data list 7
- data list 8
- data list 9
- data list 10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<br />
<br />
<br />
<br />
<div style="margin:auto;width:800px;">
<ul id="data_ul">
<li>data list <span class="data_span1">1</span></li>
<li>data list <span class="data_span2">2</span></li>
<li>data list <span class="data_span3">3</span></li>
<li>data list <span class="data_span4">4</span></li>
<li>data list <span class="data_span5">5</span></li>
<li>data list <span class="data_span6">6</span></li>
<li>data list <span class="data_span7">7</span></li>
<li>data list <span class="data_span8">8</span></li>
<li>data list <span class="data_span9">9</span></li>
<li>data list <span class="data_span10">10</span></li>
</ul>
<input type="submit" name="bt_use_outer" id="bt_use_outer" value="เรียกใช้งาน outerHTML" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bt_use_outer").click(function(){ // เมื่อคลิกที่ปุ่ม
var htmlData=$("ul#data_ul").get(0).outerHTML; //
// var htmlData=$("ul#data_ul")[0].outerHTML; //
$("ul#data_ul").after(htmlData);
});
});
</script>
</body>
</html>
