Bloggang.com : กึ่งยิงกึ่งผ่าน : innerHTML กับการเปลี่ยนข้อมูลใน HTML โดยไม่ต้อง Refresh

innerHTML กับการเปลี่ยนข้อมูลใน HTML โดยไม่ต้อง Refresh

innerHTML เป็น Properties ของ HTML Tags ต่างๆ ดังนี้

A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAMESET, hn, HTML Comment, HTML, I, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, nextID, NOBR, OL, OPTION, P, PRE, Q, RT, RUBY, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR

แล้วมันคืออะไร? ...
innerHTML แปลว่า "สิ่งที่อยู่ใน tag นั้น" เช่น

<td align=center><font color="#000000">Hello World</font></td>

innerHTML ของ TD นี้ ก็คือ
<font color="#000000">Hello World</font>

แล้วมันทำอะไรได้บ้าง?
innerHTML สามารถทำอะไรได้หลายอย่างเลยครับ เดี๋ยวทำให้ดู ตัวอย่างนี้คือเมื่อมีเมาส์มาผ่านใน TD จะให้มันเปลี่ยนตัวหนังสิอ

Click me..

ลองคลิกที่ในช่องนี้ดูนะครับ คลิกแล้ว ก็ลองคลิกอีก ..

ตัวอย่างนี้ เขียน code ดังนี้ครับ
<script language=javascript>
var i;
i=1;
function changeText(){
if (i % 2){
document.all['myTD'].innerHTML = "<b> Wow!! </b>";
}else{
document.all['myTD'].innerHTML = "Click me..";
}
i++;
}
</script>
<table border=1 bordercolor="#000000" align=center cellpadding=3 cellspacing=0>
<tr>
<td align=center bgcolor="#C0C0C0" id="myTD" onclick="changeText();" >Click me..</td>
</tr>
</table>

นี่คือตัวอย่างง่ายๆ ของ innerHTML ซึ่งมีประโยชน์อย่างมากครับ ถ้าเอาไปประยุกต์ให้ดีๆ เพราะว่าใช้ Javascript มาช่วยควบคุม HTML โดยไม่ต้องมีการ Refresh แต่ข้อมูลสามารถเปลี่ยนแปลงได้

Create Date : 12 มกราคม 2548

Last Update : 12 มกราคม 2548 2:05:29 น.

25 comments

Counter : 8518 Pageviews.

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 12 มกราคม 2548 เวลา:2:24:12 น.

เฮียกึ่งครับ ทำ <> ทำ code html ในวงเล็บอ่ะ แสดงผลใน blog ยังให้มันแสดงผลมาได้ไงครับ เพราะปรกติใส่ code มันแล้วมันจะแสดงผล html ให้เลย ไม่ยอมโชว์ code ใน blog แบบเฮียกึ่งอ่ะ

T_T

โดย: panumas05

วันที่: 12 มกราคม 2548 เวลา:2:33:50 น.

เปลี่ยน < ให้เป็น <
และ
เปลี่ยน > ให้เป็น >

เท่านี้แหละครับ มันจะแสดงผลเป็น HTML Code ขึ้นมาได้น่ะครับ โดยไม่แสดงเป็น HTML เลยครับ

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 12 มกราคม 2548 เวลา:2:36:23 น.

ขอบคุณครับ

โดย: panumas05

วันที่: 12 มกราคม 2548 เวลา:2:37:15 น.

มี trick อีกนิดครับ ถ้าจะเล่น javascript ด้วยเนี่ย ช่วง <Script> จนจบ </script> ..ห้ามเคาะ Enter!! ครับ

เพราะไม่งั้น blog จะใส่ <br> มาเพิ่มให้ ซึ่งจะทำให้ javascript มัน error ครับ

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 12 มกราคม 2548 เวลา:2:46:00 น.

สวยแต่โง่อ่ะ อ่านแล้วก็ยังไม่เข้าใจอยู่ดี

umae สวย ใส ไร้สติ

โดย: umae

วันที่: 12 มกราคม 2548 เวลา:3:40:12 น.

ขอบายเลย

โดย: N4

วันที่: 12 มกราคม 2548 เวลา:7:23:37 น.

แง๊วๆๆ แวะมาเยี่ยมพี่ชาย ค่ะ ^^

โดย: ช้อนชาสีน้ำเงิน IP: 203.149.59.130 วันที่: 12 มกราคม 2548 เวลา:9:14:48 น.

แวะมาเยี่ยมค่า ยากอ่ะ

prncess
Bloggangของแม่ติโตเจ้าค่ะ

โดย: prncess

วันที่: 12 มกราคม 2548 เวลา:15:16:19 น.

โอ๊ะ โอ

ยากจังแฮะ

โดย: Raspberry

วันที่: 12 มกราคม 2548 เวลา:16:27:32 น.

สอนอีกสิค๊าบ ขอพื้นฐานด้วย แห่ะๆ แตงหัวขี้เลื่อยอยู่แล้ว

โดย: Dek[N]a[R]o[K]

วันที่: 12 มกราคม 2548 เวลา:23:30:36 น.

อิม เป็น blog ที่มีสาระมากเลยค่ะ

ขอแอดหน่อยนะคะ
จะได้เข้ามาเก็บสาระได้บ่อยๆ

โดย: คนโง่จาวา (สามัญชนผู้น่ารัก

) วันที่: 12 มกราคม 2548 เวลา:23:40:41 น.

จ้างเค้าทำดีกว่า ไม่ต้องปวดหัววุ๊ย

มีเงินก็เงี้ย...ใช้ๆๆๆๆๆ เด๋วปลวกกิน...

โดย: Nitiboon IP: 61.90.20.177 วันที่: 13 มกราคม 2548 เวลา:13:11:22 น.

หุหุ ความรู้ใหม่ ไม่ค่อยได้ทำแบบนี้อ่ะ
^_^

โดย: *s*a*r*o*s* _ * IP: 203.149.53.246 วันที่: 13 มกราคม 2548 เวลา:16:29:46 น.

สุดยอดครับ อ่านมาหลายบ๊อกแล้ว อันนี้ได้ประโยชน์สุดเลย

ปล. ทั้งหมดอ่านมาสามบ๊อก

โดย: หมาร่าหมาหรอด

วันที่: 13 มกราคม 2548 เวลา:17:12:21 น.

แวะมาศึกษา แต่.....มะรู้เรื่องเรย

โง่คอม :)

โดย: Together In 80s Dream IP: 61.90.88.194 วันที่: 14 มกราคม 2548 เวลา:14:29:31 น.

หนูทำไม่ได้ๆๆๆๆๆ แงๆ มันยากเกินกว่าจะเข้าใจอ่ะค่ะ

โดย: patsypacky (patsypacky

) วันที่: 14 มกราคม 2548 เวลา:18:56:07 น.

”

โดย: แม่โกลเด้นฯ

วันที่: 3 มีนาคม 2548 เวลา:21:01:51 น.

innerHTML เป็นการ Insert code HTML ลงใน tag ที่ต้องการ
แต่ถ้าต้องการ Append หล่ะครับ มีคำสั่งไหมครับ หรือว่าต้องใช้คำสั่งนี้ประยุกต์เอา

โดย: เอ็กซ์ IP: 203.144.187.62 วันที่: 22 สิงหาคม 2548 เวลา:11:43:27 น.

จั๊กแหล่ว

โดย: GiGaPoP IP: 202.57.154.210 วันที่: 8 มิถุนายน 2549 เวลา:10:59:27 น.

นอกจาก innerHTML แล้ว ก็ยังมี outerHTML, innerText และ outerText ด้วยครับ (คิดว่าคุณกึ่งยิงกึ่งผ่านคงทราบดีอยู่แล้ว)

ตรงนี้เป็นมาตรฐานหรือข้อกำหนดของ DOM (Document Object Model) ถ้าถามว่า DOM คืออะไร? ตอบง่ายๆคือการกำหนดให้ element ต่างๆในหน้าเว็บเพจ (ซึ่งก็คือพวก tag ต่างๆ) กลายเป็น object ที่เราสามารถเขียนโค้ดควบคุมได้

โดย: นายบั๊กน้อย IP: 158.108.209.245 วันที่: 22 มิถุนายน 2549 เวลา:23:58:20 น.

ผ่านมาเจอครับ emo

โดย: พีทคุง (redistuO

) วันที่: 20 พฤษภาคม 2550 เวลา:20:16:50 น.

ขอบคุณมาก ๆ เลยค่ะ หาเท่าไหร่ก็หาไม่เจอ

แต่ที่กำลังหาคือ ทำยังไงให้ onmouseClick แล้วมันค้างภาพเหมือนตอน onmouseOver ค่ะ

ช่วยแนะนำหน่อยค่ะ ขอบคุณล่วงหน้านะค่ะ
^^

nangfa2001@hotmail.com

โดย: nangfa IP: 222.123.140.29 วันที่: 29 สิงหาคม 2550 เวลา:17:08:13 น.

บ๊ะ...
อันนี้ผมชอบแหะ
ต้องขอจั๊กหน่อยแล้ว

โดย: myhtml IP: 61.90.104.254 วันที่: 22 พฤศจิกายน 2551 เวลา:20:21:22 น.

ขอบคุณมากๆค่ะhttps://www.bloggang.com/emo/emo19.gif
กำลังหาวิธีแบบนี้พอดีเลยค่ะ บทความนี้ มีประโยชน์มากๆเลย

โดย: อ้อม IP: 192.168.77.13, 203.156.186.243 วันที่: 18 กุมภาพันธ์ 2553 เวลา:17:10:30 น.