HTML - DOM Element toString() Method

Quiz

The toString() method allows us to convert an HTML element into a string format without changing the original element. It usually shows its type as [object Object].

Syntax

object.toString();

Parameters

This method does not accepts any parameters.

Return Value

The toString() method does not directly return a value. Instead, it is automatically used to convert an object into a string format.

Examples of HTML DOM Element 'toString()' Method

Below are some of the examples of toString() method, which converts an object into a string format for displaying or performing different operations in HTML DOM.

Using toString() Method on an HTML Element

This example shows the usage of the toString method. The code accesses the content of a <div> element by calling the toString() function, which converts the element to its string format and updates the content to display the result of toString().

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Method Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Click the button to get the result!</p>
  <div id="myDiv">
      <p>Example content.</p>
  </div>

  <button onclick="displayToString()">
    Display toString() Result
  </button>

  <div id="ot"></div>

  <script>
      function displayToString() {
          const m=document.getElementById('myDiv');
          const opd=document.getElementById('ot');

          // Using toString() on the HTML element
          const elementString = m.toString();

          // Displaying the result
          opd.textContent = 
          `toString() Result: ${elementString}`;
      }
  </script>
</body>

</html>

Converting an Array to String

This example includes an array containing elements. The toString() method is applied to convert the array into a string. The code then updates the content of a <div> element to display the array as a string.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Example: Array</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting an Array to String</p> 
  <button onclick="convertArrayToString()">
    Convert Array to String
  </button>

  <div id="output"></div>

  <script>
      function convertArrayToString() {
          const my=['apple', 'banana', 'cherry'];
          const arrayString = my.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Array as String: ${arrayString}`;
      }
  </script>
</body>

</html>

Converting Number to String

This example shows the usage of the toString() method to convert a number into a string. The code then calls the toString() method and updates the content of a <div> element to display the number as a string.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Number</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Number to String</p>   

  <button onclick="convertNumberToString()">
    Convert Number to String
  </button>

  <div id="output"></div>

  <script>
      function convertNumberToString() {
          const myNumber = 12345;
          const numstr = myNumber.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Number as String: ${numstr}`;
      }
  </script>
</body>

</html>

Converting Object to String

This example shows the usage of the toString() method to convert an object with properties 'name' and 'age' into string . The code then calls the toString() method and updates the content of a <div> to display the object as string.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Object</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Object to String</p>  

  <button onclick="convertObjectToString()">
    Convert Object to String
  </button>

  <div id="output"></div>

  <script>
      function convertObjectToString() {
          const myObject={name:'John',age:30};
          const objectString=myObject.toString(); 


          const outputDiv = 
          document.getElementById('output');
          outputDiv.textContent = 
          `Object as String: ${objectString}`;
      }
  </script>
</body>

</html>

Supported Browsers

Method
toString()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page