JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="foo">
    <p>content</p>
    <p>more content</p>
    and more content
</div>

JavaScript

// get the div
var div = document.getElementById('foo');

   // remove child nodes while at least one exists
while( div.childNodes[0] ) {
    div.removeChild( div.childNodes[0] );
}
   // create a new span element
var span = document.createElement( 'span' );

   // give it some text content
span.appendChild( document.createTextNode("I'm new!!!") );

   // append the span to the original div
div.appendChild( span );