ออบเจ็กต์ Meta ใน HTML DOM

ออบเจ็กต์ Meta (Meta Object)

ออบเจ็กต์ Meta ใน HTML DOM แทนอิลิเมนต์ <meta> ใช้สำหรับจัดการข้อมูลเมตาของเอกสาร HTML เช่น charset, viewport, description, keywords, author และ HTTP headers

ไวยากรณ์ (Syntax)

การสร้างอิลิเมนต์ <meta>

var metaObject = document.createElement("META")

คุณสมบัติ (Properties)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการสร้างอิลิเมนต์ <meta> แบบไดนามิก

<!DOCTYPE html>
<html>
<head>
    <title>Meta Object</title>
    <style>
        form { width: 70%; margin: 0 auto; text-align: center; }
        * { padding: 2px; margin: 5px; }
        input[type="button"] { border-radius: 10px; }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Meta-Object</legend>
            <h2>Tutorial</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <input type="button" onclick="createMeta()" value="Create Meta Tag">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        function createMeta() {
            var metaTag = document.createElement('META');
            metaTag.setAttribute("name", "tutorialsContent");
            metaTag.setAttribute("content", "JS tutorials");
            document.head.appendChild(metaTag);
            divDisplay.textContent = '<meta name="' + metaTag.name + '" content="' + metaTag.content + '" >';
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Create Meta Tag จะมีแค่เนื้อหาปกติ

หลังคลิกปุ่ม Create Meta Tag จะสร้าง <meta name="tutorialsContent" content="JS tutorials"> ใน <head> และแสดงโค้ดที่สร้าง

คำอธิบายเพิ่มเติม

• อิลิเมนต์ <meta> ต้องอยู่ภายใน <head> เสมอ

• คุณสมบัติ httpEquiv ใช้สำหรับ HTTP headers เช่น refresh, content-type, X-UA-Compatible
• คุณสมบัติ name ใช้สำหรับ metadata ชนิดต่างๆ เช่น viewport, description, keywords, author
• คุณสมบัติ scheme ล้าสมัย (deprecated) ใน HTML5 ไม่ควรใช้