ออบเจ็กต์ Pre ของ HTML DOM

ออบเจ็กต์ Pre ของ HTML DOM แทนองค์ประกอบ <pre> ในเอกสาร HTML

การสร้างออบเจ็กต์ pre

รูปแบบการใช้งาน (Syntax)

รูปแบบการสร้างคือ:

document.createElement(“PRE”);

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

ตัวอย่างด้านล่างแสดงการใช้งานออบเจ็กต์ pre

<!DOCTYPE html> <html> <head> <style>    body{       text-align:center;       background-color:#fff;       color:#0197F6;    }    h1{       color:#23CE6B;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    .btn{       background-color:#fff;       border:1.5px dashed #0197F6;       height:2rem;       border-radius:2px;       width:60%;       margin:2rem auto;       display:block;       color:#0197F6;       outline:none;       cursor:pointer;    }    pre{       font-size:1.2rem;       color:#db133a;    } </style> </head> <body> <h1>สาธิตออบเจ็กต์ DOM pre</h1> <button onclick="createPre()" class="btn">สร้างออบเจ็กต์ pre</button> <script>    function createPre() {       var preElement = document.createElement("PRE");       preElement.innerHTML="สวัสดี! ผมคือองค์ประกอบ pre ใน HTML";       document.body.appendChild(preElement);    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้

คลิกที่ปุ่ม "สร้างออบเจ็กต์ pre" เพื่อสร้างออบเจ็กต์ pre