jQuery การสร้าง Element เพิ่มในหน้าเว็บ HTML

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: jQuery การสร้าง Element เพิ่มในหน้าเว็บ HTML

jQuery การสร้าง Element เพิ่มในหน้าเว็บ HTML

โดย M009 » 03/07/2013 4:35 pm

การ add element จะใช้คำสั่ง
append() = การเพิ่มต่อจากของเดิม
after() = การเพิ่มหลัง element นั้น
before() = การเพิ่มก่อน element นั้น
html() = การแทรก element

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
jQuery(document).ready(function(){
  jQuery("#btn1").click(function(){
    var text = "<b>เพิ่มก่อน</b>";
    jQuery("#center").before(text);
  });

  jQuery("#btn2").click(function(){
     var text = "<b>เพิ่มหลัง</b>";
    jQuery("#center").after(text);
  });

  jQuery("#btn3").click(function(){
     var text = "<b>ต่อ</b>";
    jQuery("#center").append(text);
  });

  jQuery("#btn4").click(function(){
     var text = "<b>แทรก</b>";
    jQuery("#center").html(text);
  });

});
</script>
</head>

<body>
<span id="center"> CENTER </span>
<br><br>
<button id="btn1">ก่อน</button>
<button id="btn2">หลัง</button>
<button id="btn3">ต่อ</button>
<button id="btn4">แทรก</button>
1.jpg
1.jpg (16.92 KiB) Viewed 2599 times

ข้างบน