PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

26 February 2013 By
jquery dom html


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






Tags:: dom jquery html






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


URL สำหรับอ้างอิง