title: How to add html inside textarea?
body: <p>I want to enter an html code in the textarea after you change the div1 and div2 position by button click. Any changes I make to html div parent should also be changed in textarea. I have no idea how to do it?
  The purpose is to send a changed div parent in the database..</p>
  
  <pre><code>&lt;style&gt;
  #parent{
  width: 50px;
  height: 100px;
  padding: 10px;
  background-color: grey;
  }
  #div1{
  width: 50px;
  height: 50px;
  background-color: red;
  }
  #div2{
  width: 50px;
  height: 50px;
  background-color: blue;
  }
  &lt;/style&gt;
  
  &lt;div id="parent"&gt;
      &lt;div id="div1"&gt;&lt;/div&gt;
      &lt;div id="div2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type="button"  onclick="myFunctionSwitch()" &gt;Chenge texareaHTML&lt;/button&gt;
  
  &lt;form&gt;
  &lt;textarea rows="4" cols="30" id="showhtml"&gt;
  &lt;div id="parent"&gt;
      &lt;div id="div1"&gt;&lt;/div&gt;
      &lt;div id="div2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/textarea&gt;
  &lt;/form&gt;
  
  
  &lt;script&gt;
  
  function myFunctionSwitch() {
  
    document.getElementById("div1").remove();
    document.getElementById("div2").remove();
  
    var x = document.createElement('div');
    x.id = 'div2';
    document.getElementById("parent").appendChild(x);
    var y = document.createElement('div');
    y.id = 'div1';
    document.getElementById("parent").appendChild(y);
  
  
    document.getElementById("showhtml").innerHTML = x + y;
  }
  
  &lt;/script&gt;
  
  </code></pre>