การสร้าง element ด้วย Javascript

การสร้าง element ต่างๆขณะทำงานด้วย Javascript มีวิธีการหลักๆอยู่ 2 วิธีด้วยกันครับ คือการสร้างด้วย Ajax และ การสร้างด้วย Javascript

วิธีที่ 1 การสร้าง element ด้วย Ajax ก็มีหลักการตรงไปตรงมาเลยครับ ด้วยการให้ ไฟล์ PHP ที่ Ajax เรียกไป ส่งค่า HTML ของ input ที่ต้องการกลับมาเลย

ผมจะเสนอตัวอย่างโดยใช้ GAJAX นะครับ

<head>

<title>Create Element</title>

<script src="https://www.goragod.com/ajax/gajax.js" type="text/javascript"></script>

<script type="text/javascript">

    function doCreate(){

        new GAjax().send('element.php',null,function(xhr){

            $E('result').innerHTML=xhr.responseText;

        });

    };

</script>

</head>

<body>

<form id="result"></form>

<input type="button" onclick="doCreate()" value="Create" />

</body>

</html>

โ้ค้ดด้านบนเป็นโค้ดส่วน Ajax ซึ่งเมื่อคลิกปุ่ม Create จะไปทำการร้องขอข้อมูลโดย Ajax ที่ element.php ซึ่งที่หน้า element.php (โค้ดด้านล่าง) จะมีการคืนค่าเป็น element ที่ต้องการมาเลย ในรูปแบบ HTML ซึ่งเราสามารถเขียน PHP เพื่อตรวจสอบข้อมูลหรือกระทำอื่นใดก่อนก็ได้เหมือน PHP ทั่วไปได้ครับ
ไฟล์ element.php ก็เป็นการคืนค่า element ต่างๆที่ต้องการเท่านั้นครับ

<p><input type="text" value="text 1" name="inp[]" /></p>

<p><input type="text" value="text 2" name="inp[]" /></p>

<p><textarea name="textarea">demo</textarea></p>

วิธีที่ 2 การสร้าง element ด้วย Javascript ซึ่งจริงๆแล้ว วิธีนี้เป็นวิธีที่ดีกว่าวิธีแรกครับ เพราะจะเป็นวิธีที่ถูกต้องตามหลักการมากกว่า ซึ่งในบางครั้งเราจะพบว่าการสร้าง element ตามวิธีแรก อาจให้ผลลัพท์ที่ไม่ตรงตามต้องการหรือมีการทำงานที่ไม่ค่อยปกติในบางครั้งครับ ซึ่งถ้าเราไม่สามารถปรับปรุงวิธีแรกให้ได้ผลตามที่ต้องการได้แล้วละก็ ให้ลองสร้าง element ตามวิธีที่ 2 นี้ครับ

หัวใจในการสร้าง element ตามวิธีนี้คือการใช้คำสั่ง createElement และ appendChild ของ Javascript ครับ
createElement ใช้ในการสร้าง element ใดๆก็ได้ที่ต้องการ โดยระบุชนิดของ element นั้นๆ เป็นพารามิเตอร์ให้กับฟังก์ชั่น คืนค่าเป็น object HTML ของ element นั้นๆ
appendChild ใช้สำหรับแทรก element ใดๆ ลงใน element ที่กำหนด โดย element ที่แทรกจะเป็น โหนดลูก (child node) ของ element ที่แทรก

// สร้าง element ชนิด input

var input = document.createElement('input');

// กำหนด ชนิด input ที่สร้างใหม่เป็น text

input.type = 'text';

// กำหนดชื่อ input เป็น array

input.name = 'inp[]';

// เอา input ที่สร้างใหม่ใส่ลงใน form result(เหมือนตัวอย่างก่อนหน้า)

document.getElementById('result').appendChild(input);

เราสามารถทำแบบเดียวกันเพื่อสร้าง หลายๆ element ตามที่ต้องการได้นะครับ โดย element ที่แทรก(appendChild) ตัวต่อไป จะอยู่ถัดจาก element ที่มีอยู่แล้วครับ
จริงๆแล้ว ฟังก์ชั่นในกลุ่มนี้ยังมีอีกหลายตัวครับ ที่มีการทำงานคล้ายๆกัน ครับ

ในกรณีที่ 2 นี้ เราอาจจะไม่จำเป็นต้องใช้ Ajax เลยก็ได้ครับ หากเราสามารถกำหนดระบุชนิดของ element ที่ต้องการสร้างหลังจากกดปุ่ม Create ได้เป็นการตายตัว แต่หากเราจำเป็นต้องสร้าง element ที่จะต้องมีการตรวจสอบหรือกำหนดก่อนโดย PHP เราก็อาจส่งไปตรวจสอบยัง PHP ก่อนด้วย Ajax แล้วคืนค่าที่จำเป็นกลับมาเพื่อสร้าง element ที่ต้องการได้ครับ ซึ่งในการคืนค่ากลับมานั้นเราอาจใช้เทคนิคใดๆก็ได้ครับ ตามความถนัด เช่น text, JSON หรือ XML

<head>

<title>Create Element</title>

<script src="https://www.goragod.com/ajax/gajax.js" type="text/javascript"></script>

<script type="text/javascript">

    function doCreate(id){

        new GAjax().send('element.php','id=' + id,function(xhr){

            // ดูค่าที่ตอบกลับ

            alert(xhr.responseText);

            // สร้าง element จากค่าที่ return

            var elem = document.createElement(xhr.responseText); 

            // เอา element ที่สร้างใส่ในฟอร์ม result

            $E('result').appendChild(elem); 

        });

    };

</script>

</head>

<body>

<form id="result"></form>

<input type="button" onclick="doCreate(0)" value="Create 1" />

<input type="button" onclick="doCreate(1)" value="Create 2" />

</body>

</html>

ด้านบนเป็นโค้ดตัวอย่างการสร้าง element ด้วย createElement โดยใช้ร่วมกับ Ajax เพื่อตรวจสอบว่า ต้องการ element ชนิดใดครับ ให้ลองสังเกตและทำความเข้าใจกับโค้ดให้ดีก่อนนำไปประยุกต์ใช้งานนะครับ

<?php

    $id = (int)$_POST[id];

    if($id==0){

        // คืนค่า text กลับเพื่อสร้าง input ชนิด text

        echo 'input'; 

    }else if($id==1){

        // คืนค่า textarea กลับ เพื่อสร้าง textarea

        echo 'textarea'; 

    }

?>

โค้ด php จะทำการรับค่ามาแล้วตรวจสอบว่า ส่งค่าใดมา และคืนค่าที่เหมาะสมกลับไปยัง Ajax ครับ ตัวอย่างนี้จะเป็นการคืนค่าชนิดของ element ที่ต้องการเพียงอย่างเดียวนะครับ ในทางปฏิบัติ เราสามารถคืนค่ากลับหลายๆค่าได้ตามที่ต้องการโดยการส่งเป็น JSON XML หรือข้อความ text ใดๆก็ได้ตามถนัด แล้วนำกลับไปแยกและสร้าง element ที่เหมาะสมเอาเองก็ได้ครับ

0SHAREFacebook Twitter LINE it!