คุณสมบัติ dateTime ของอีลีเมนต์ ins ใน HTML DOM

คุณสมบัติ dateTime ของอีลีเมนต์ <ins> ใช้สำหรับดึงค่าวันที่และเวลาที่ข้อความถูกแทรกเพิ่มเข้ามา

ไวยากรณ์ (Syntax)

insObject.dateTime

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

ตัวอย่างด้านล่างแสดงการดึงวันที่/เวลาจากแท็ก <ins> ที่มีข้อมูลเกี่ยวกับการค้นพบน้ำแข็งบนดวงจันทร์:

<!DOCTYPE html>
<html>
<head>
<title>ins dateTime</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>ins-dateTime</legend>
    <h1>Fact:</h1>
    <p>Water cannot persist on moon's surface. 
      <ins id="newInfo" cite="https://www.example.com/water-ice-moon-surface-confirmed.html" datetime="2018-08-21T18:23Z"> 
        Water ice found on moon.</ins> 
    </p>
    <input type="button" onclick="getDate()" value="When was this change made?">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var insDateTime = document.getElementById("newInfo");
  
  function getDate() {
    divDisplay.textContent = 'Text inserted on ' + insDateTime.dateTime.split("T")[0];
    divDisplay.textContent += ' at ' + insDateTime.dateTime.split("T")[1];
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม "When was this change made?": แสดงข้อความเดิมพร้อมข้อความที่แทรกเพิ่ม (underline)

หลังคลิกปุ่ม "When was this change made?": แสดงวันที่และเวลาที่ข้อความถูกแทรก (2018-08-21 at 18:23Z)

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้