JavaScript, outerHTML and outerText

In JavaScript, outerHTML and outerText are properties used to get or set the content of an element, but they behave differently when it comes to the element itself. Here’s an explanation of their differences with examples:

1. outerHTML

Description: The outerHTML property gets or sets the entire HTML of an element, including the element itself (i.e., the tag and its contents). When setting it, it replaces the entire element with the new HTML.

Example:

<div id="example1">
  <p>Hello <strong>World</strong></p>
</div>

<script>
  // Get the entire HTML content of the element, including the element itself
  let content = document.getElementById("example1").outerHTML;
  console.log(content); 
  // Output: <div id="example1"><p>Hello <strong>World</strong></p></div>
  
  // Set new HTML content, replacing the element entirely
  document.getElementById("example1").outerHTML = '<section>New <span>Content</span></section>';
</script>

Explanation:

outerHTML includes the element's opening and closing tags. In the example, it returns the entire &lt;div&gt; element with its contents. When setting outerHTML, the entire &lt;div&gt; is replaced with a new <section> element.

2. outerText

Description: The outerText property gets or sets the text content of an element, including the text inside the element and any of its children, but without the HTML tags. It behaves similarly to innerText, but it operates on the entire element and its contents.

Example:

<div id="example2">
  <p>Hello <strong>World</strong></p>
</div>

<script>
  // Get the text content of the element, without any tags
  let textContent = document.getElementById("example2").outerText;
  console.log(textContent); 
  // Output: Hello World (no tags)
  
  // Set new text content, replacing the element's text
  document.getElementById("example2").outerText = 'New Text Content';
</script>

Explanation: outerText returns only the text content of the entire element, similar to innerText, but it includes the text from the element itself and all of its children. In this case, it returns "Hello World" without any tags, even if there’s an inline &lt;strong&gt; tag.

Key Differences:

• Content Type: outerHTML returns the entire HTML structure of the element, including its tags.
• outerText returns only the text content of the element, without HTML tags.
• Impact of Setting: Setting outerHTML will completely replace the element and its contents with new HTML.
• Setting outerText will only change the text inside the element, not its tag or structure.

Example Comparison:

<div id="example3">
  <p>Hello <strong>World</strong></p>
</div>

<script>
  // Get outerHTML (includes the <div> element)
  let htmlContent = document.getElementById("example3").outerHTML;
  console.log(htmlContent); 
  // Output: <div id="example3"><p>Hello <strong>World</strong></p></div>

  // Get outerText (includes the text but no HTML tags)
  let textContent = document.getElementById("example3").outerText;
  console.log(textContent); 
  // Output: Hello World

  // Set new HTML (replaces the <div> element completely)
  document.getElementById("example3").outerHTML = '<section>New Content</section>';
  
  // Set new text (replaces the text inside the <div>)
  document.getElementById("example3").outerText = 'Updated Text Content';
</script>

Summary:

• outerHTML: Includes the element’s tag and its inner content (HTML structure). Use it when you need to manipulate the entire HTML of an element.
• outerText: Includes only the text content of the element and its children, with no tags. Use it when you only need the visible text content of an element.