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

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

ออบเจ็กต์ Mark ใน HTML DOM แทนอิลิเมนต์  ใช้สำหรับเน้นข้อความ (highlight) เพื่อแสดงความสำคัญหรือความเกี่ยวข้องในบริบทปัจจุบัน

ไวยากรณ์ (Syntax)

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

var markObject = document.createElement("MARK")

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

ตัวอย่างด้านล่างแสดงการสร้างอิลิเมนต์  แบบไดนามิกเมื่อผู้ใช้ไม่กรอกชื่อ

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Mark</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>HTML-DOM-Mark</legend>
            <label>Full Name: <input type="text" id="textSelect" autocomplete="off"> <input type="button" value="Submit" onclick="createMark()"> </label>
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var textSelect = document.getElementById("textSelect");
        function createMark() {
            if (textSelect.value === '') {
                var mark = document.createElement('MARK');
                var textInput = document.createTextNode('Name Required');
                mark.appendChild(textInput);
                divDisplay.insertAdjacentElement("afterbegin", mark);
            }
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Submit จะแสดงฟอร์มป้อนชื่อ

หลังคลิกปุ่ม Submit โดยไม่กรอกชื่อ จะแสดงข้อความ Name Required แบบเน้นสี

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