How to convert the html object to string type

Question

Apu June 03, 2023 . #HowTo . #Html

❌

How to convert the html object to string type

In this article, you will take a look at how to convert the html object to string type.

Sometimes, when we try to display an element from another elements using JavaScript, we see the [object HTMLDivElement] html object.

Suppose, we have a <div> element, inside it we have a <h4> and a <p> elements.

<div id="my-div">
  <h4>This is a heading tag.</h4>
  <p>This is a paragraph.</p>
</div>

We want to display the above element <div> to a new <div> element when a button is clicked using JavaScript.

<button onclick="myFunction()">Click Me</button>
<div id="output">
</div>

[object HTMLDivElement] problem

<div id="my-div">
  <h4>This is a heading tag.</h4>
  <p>This is a paragraph.</p>
</div>
<div id="output">
  
</div>
<button onclick="myFunction()">Click Me</button>
<script>
 const myInput = document.querySelector('#my-div')
 const myOutput = document.querySelector('#output')
  function myFunction(){
    myOutput.innerHTML = myInput
  }
</script>

Try it Yourself »

In the above example, we seen the problem. Here we should use the innerHTML Or innerText property to get the value of the <div> element.

Solved the [object HTMLDivElement] problem

<div id="my-div">
  <h4>This is a heading tag.</h4>
  <p>This is a paragraph.</p>
</div>
<div id="output">
  
</div>
<button onclick="myFunction()">Click Me</button>
<script>
 const myInput = document.querySelector('#my-div')
 const myOutput = document.querySelector('#output')
  function myFunction(){
    myOutput.innerHTML = myInput.innerHTML
    }
</script>

Try it Yourself »

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:45:55+05:30

In this article, you will take a look at how to convert the html object to string type. So…