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

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
jquery html dom

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



 ใช้สำหรับแสดงข้อมูลจาก 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: jquery dom html







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ