การแสดงค่า DOM elements ที่ได้จาก jQuery Object ออกเป็น HTML

26 February 2013 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

dom html jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ dom html jquery

ใช้สำหรับแสดงข้อมูลจาก 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>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ