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

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

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

ดูแล้ว 10,046 ครั้ง


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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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