JSFiddle - React, Tailwind, and code Playground

by mathheadinclouds

HTML

<head>
  <script type='dontAsk' id='initialTextAreaContents'>
    <div>
        <div>
            useless button<br>
            <button>click me</button> lorem ipsum
        </div>
        <svg width="300" height="80">
          <defs>
            <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="50%" y2="100%" spreadMethod="pad">
              <stop offset="0%"   stop-color="#00ff00" stop-opacity="1"></stop>
              <stop offset="100%" stop-color="#ff00ff" stop-opacity="1"></stop>
            </linearGradient>
          </defs>
          <rect x="10" y="10" width="900" height="900" fill="url(#myLinearGradient1)" stroke="none"></rect>
        </svg>
        <div>
            just as useless button<br>
            <button>no, don't click that other button, click me instead</button> dolor sit amet
        </div>
    </div>
        </script>
</head>

<body>
  <textarea id='theTextArea' rows=27 cols=120></textarea>
  <br>
  <button onclick="convert()">convert to xhtml</button>
  <br>
  <fieldset id="resultParent">
    <legend>result</legend>
    <pre id="result"></pre>
  </fieldset>
</body>

JavaScript

var content;
var ta, resultElt, resultParent;
var container;

function bodyOnload() {
  content = document.getElementById('initialTextAreaContents').textContent;
  ta = document.getElementById('theTextArea');
  resultElt = document.getElementById('result')
  resultParent = document.getElementById('resultParent')
  ta.value = content;
  resultParent.style.display = 'none';
}
bodyOnload();

function convert() {
  content = ta.value;
  container = document.createElement('div');
  container.insertAdjacentHTML('afterbegin', content);
  var XS = new XMLSerializer();
  resultElt.textContent = XS.serializeToString(container);
  resultParent.style.display = '';
}