HTML DOM cite object

The HTML DOM cite object is associated with the HTML <cite> element. The <cite> element is used to give reference to a cited creative work and title must be included. It can be painting, book, tv show, movies etc.

Syntax

Following is the syntax for −

Creating a cite object −

var x = document.createElement("CITE");

Example

Let us see an example of the HTML DOM cite object −

<!DOCTYPE html>
<html>
<body>
<p>Click the below button to create a CITE element.</p>
<button onclick="createCite()">CREATE</button><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-
_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-
_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">
<script>
   function createCite() {
      var x = document.createElement("CITE");
      var t = document.createTextNode("The Starry night.");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM cite object

Click “CREATE” −

HTML DOM cite object

In the above example we have inserted an image using an <img> tag −

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">

We have then created a button CREATE to execute createCite() method −

<button onclick="createCite()">CREATE</button>

The createCite() method creates a <cite> element and assigns it to the variable x. A text node containing some text is created and assigned to variable t. The text node is then appended to the <cite> element using the appendChild() method on variable x. The <cite> element along with the text node is then appended to the document body using the appendChild() method on the document body.