Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng HTML DOM Code

Đối tượng HTML DOM Code được liên kết với thẻ HTML 5. Nó được sử dụng để đánh dấu một đoạn mã bằng cách bao quanh nó bên trong phần tử . Đối tượng Code về cơ bản đại diện cho phần tử .

Cú pháp

Sau đây là cú pháp cho -

Tạo một đối tượng mã -

var a = document.createElement("CODE");

Ví dụ

Hãy để chúng tôi xem một ví dụ cho đối tượng mã DOM HTML -

<!DOCTYPE html>
<html>
<body>
<p>Click the below button to create a CODE element with some text</p>
<button onclick="createCode()">CREATE</button><br><br>
<script>
   function createCode() {
      var x = document.createElement("CODE");
      var t = document.createTextNode("print('HELLO WORLD')");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng HTML DOM Code

Khi nhấp vào TẠO -

Đối tượng HTML DOM Code

Trong ví dụ trên -

Chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức createCode () khi người dùng nhấp vào -

<button onclick="createCode()">CREATE</button><br><br>

Phương thức createCode () tạo một phần tử bằng cách sử dụng phương thức createElement (“CODE”) trên đối tượng tài liệu. Phần tử được tạo được gán cho biến x. Sau đó, một nút văn bản với một số văn bản được tạo bằng phương thức createTextNode () trên đối tượng tài liệu. Nút văn bản này được nối dưới dạng phần tử con vào phần tử bằng phương thức appendChild () trên biến x.

Phần tử này cùng với nút văn bản sau đó được thêm vào dưới dạng phần tử con của nội dung tài liệu bằng cách sử dụng phương thức appendChild () -

function createCode() {
   var x = document.createElement("CODE");
   var t = document.createTextNode("print('HELLO WORLD')");
   x.appendChild(t);
   document.body.appendChild(x);
}