PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

26 February 2013 By Ninenik Narkdee
dom jquery html

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ dom jquery 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>
 


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



บริการเว็บ server web hosting
บริการเว็บ server web hosting


Tags:: html jquery dom







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