HTML DOM Ins Object: Accessing Inserted Text Elements

The HTML DOM ins object represents the <ins> element in HTML, which is used to denote text that has been inserted into a document. The ins element is often used in conjunction with the <del> element to show modifications made to a document. Using JavaScript, you can access and manipulate the properties and content of the <ins> element via the HTML DOM ins object, enabling dynamic content changes on your web pages. This article will guide you through accessing and manipulating inserted text elements using the HTML DOM ins object.

What is the HTML DOM ins Object?

The HTML DOM ins object is a JavaScript representation of the HTML <ins> element. This object provides various properties and methods that allow you to interact with and change the inserted text content, its attributes, and its behavior. With this object, you can dynamically update the text within an <ins> tag, set its attributes (like the date and time of the insertion), or access its content for manipulation.

Purpose of the ins Object

The main purpose of the HTML DOM ins object is to provide programmatic access to <ins> elements, enabling you to:

• Dynamically update the content of inserted text.
• Set or modify the cite, datetime and other attributes of an inserted text.
• Access or change the insertion date and time.
• React to user interactions and make real-time changes to the page.
• Enhance accessibility by correctly marking inserted text.

Accessing the ins Object

To start working with the ins object, you need to first access the <ins> element in the DOM using JavaScript. You can do this using various methods, such as document.getElementById(), document.querySelector(), or document.getElementsByTagName().

Here’s a basic HTML structure containing an <ins> element:

<ins id="insertionExample">This text has been inserted</ins>

To access this element in JavaScript, you can use:

const insElement = document.getElementById("insertionExample");

Now, insElement is a reference to the HTML DOM ins object representing the <ins> element. You can now use this reference to access and manipulate its properties and methods.

Key Properties of the ins Object

The ins object has several key properties, which are listed below:

Property	Type	Description
`cite`	String	Specifies the URL of a document explaining the insertion.
`datetime`	String	Specifies the date and time of the insertion.
`textContent`	String	Gets or sets the text content of the element, including all child elements.
`innerHTML`	String	Gets or sets the HTML content of the element, including child HTML elements.
`id`	String	Gets or sets the `id` attribute of the element.
`className`	String	Gets or sets the class name of the element.

Examples of Accessing and Manipulating the ins Object

Let’s go through several examples to demonstrate how to access and manipulate the <ins> element using the HTML DOM ins object.

Example 1: Basic Access of Properties

This example shows how to access the cite, datetime, textContent and id properties of an <ins> element.

<ins id="insExample1" cite="/changelog" datetime="2024-07-26T10:00:00">Initial text.</ins>
<p id="output1"></p>

<script>
  const insExample1 = document.getElementById("insExample1");
  const output1 = document.getElementById("output1");

  let cite_value = insExample1.cite;
  let datetime_value = insExample1.datetime;
  let text_content = insExample1.textContent;
    let id_value = insExample1.id;

  output1.innerHTML = `
  Cite: ${cite_value}<br>
  Datetime: ${datetime_value}<br>
  Text content: ${text_content}<br>
  ID: ${id_value}
  `;
</script>

Output:

Cite: /changelog
Datetime: 2024-07-26T10:00:00
Text content: Initial text.
ID: insExample1

In this example, we access the cite, datetime, textContent and id properties using the HTML DOM ins object and display them in the paragraph element with the id “output1”.

Example 2: Modifying Text Content

This example shows how to modify the text content of an <ins> element using the textContent property.

<ins id="insExample2">Old text.</ins>
<p id="output2"></p>

<script>
  const insExample2 = document.getElementById("insExample2");
  const output2 = document.getElementById("output2");

  insExample2.textContent = "New inserted text.";

  output2.innerHTML = `Modified text: ${insExample2.textContent}`;
</script>

Output:

Modified text: New inserted text.

Here, the textContent property is used to change the text inside the <ins> tag to “New inserted text.”, and the new text is displayed in the paragraph with id “output2”.

Example 3: Modifying HTML Content

This example shows how to modify the content, including other HTML elements using the innerHTML property.

<ins id="insExample3">Old <b>text</b>.</ins>
<p id="output3"></p>

<script>
  const insExample3 = document.getElementById("insExample3");
  const output3 = document.getElementById("output3");

  insExample3.innerHTML = "New <i>inserted</i> text with HTML.";

  output3.innerHTML = `Modified HTML: ${insExample3.innerHTML}`;
</script>

Output:

Modified HTML: New inserted text with HTML.

In this example, we use the innerHTML property to change the content of the <ins> tag to “New inserted text with HTML”, which includes HTML elements inside. The modified HTML content is then displayed in the paragraph element.

Example 4: Modifying Attributes

This example demonstrates modifying the cite and datetime attributes of the <ins> tag using the HTML DOM ins object.

<ins id="insExample4" cite="/oldcite" datetime="2024-01-01">Initial text.</ins>
<p id="output4"></p>

<script>
  const insExample4 = document.getElementById("insExample4");
  const output4 = document.getElementById("output4");

    insExample4.cite = '/newcite';
    insExample4.datetime = '2024-07-27T10:00:00';


  output4.innerHTML = `
  Modified Cite: ${insExample4.cite}<br>
  Modified Datetime: ${insExample4.datetime}
  `;
</script>

Output:

Modified Cite: /newcite
Modified Datetime: 2024-07-27T10:00:00

Here, the cite and datetime attributes are updated using the dot notation directly on the DOM element. The new attribute values are then displayed in the paragraph element with id “output4”.

Example 5: Dynamic Updates in Response to User Actions

This example demonstrates a practical use case where content is changed dynamically in response to a user interaction.

<ins id="insExample5">Initial text.</ins><br>
<button id="updateButton">Update Text</button>
<p id="output5"></p>

<script>
  const insExample5 = document.getElementById("insExample5");
  const updateButton = document.getElementById("updateButton");
  const output5 = document.getElementById("output5");

  updateButton.addEventListener('click', () => {
      insExample5.textContent = "Text updated on button click.";
    output5.innerHTML = `Modified Text: ${insExample5.textContent}`;
  });
</script>

Output:

Initial text.

[Update Text Button]

(After clicking “Update Text” button):

Modified Text: Text updated on button click.

In this example, clicking the “Update Text” button changes the content of the <ins> tag, and the modified text is displayed.

Browser Support

The HTML DOM ins object and the underlying <ins> element are supported in all modern web browsers. This makes them reliable for use in various web development projects.

Conclusion

The HTML DOM ins object provides a powerful way to access and manipulate <ins> elements programmatically using JavaScript. By leveraging the properties and methods of this object, you can dynamically update the content and attributes of inserted text elements, allowing for interactive and dynamic web pages. This detailed guide should give you a comprehensive understanding of how to use the HTML DOM ins object effectively in your web development projects.