HTML DOM Code object

The HTML DOM Code object is associated with the HTML 5 <code> tag. It is used for marking up a piece of code by surrounding it inside the <code> element. The Code object basically represents <code> element.

Syntax

Following is the syntax for −

Creating a code object −

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

Example

Let us see an example for the HTML DOM code object −

<!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>

Output

This will produce the following output −

HTML DOM Code object

On clicking CREATE −

HTML DOM Code object

In the above example −

We have created a button CREATE that will execute the createCode() method when clicked by the user −

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

The createCode() method creates a <code> element using createElement(“CODE”) method on the document object. The element created is assigned to variable x. Then a text node with some text is created using the createTextNode() method on the document object. This text node is appended as a child to the <code> element using the appendChild() method on variable x.

This <code> element along with the text node is then appended as the child of the document body using the appendChild() method −

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