Convert jQuery object to HTML

Question

I'm trying to take a string in javascript, parse and replace an item within the HTML and then cast it back to a string. I cannot for the life of me figure out how to turn the new jQuery object back to HTML.

var compiled = '<div><div id="header-content">Test</div></div>';
$(compiled).find('#header-content').html('Woot');
var newCompiled = $(compiled).html();
//Need newCompiled to be '<div><div id="header-content">Woot</div></div>'

Please help.

Answer 1

You are modifying the dom elements created by jQuery, but is not storing the reference to the created element

var compiled = '<div><div id="header-content">Test</div></div>';

var $tmp = $('<div />', {
  html: compiled
})

$tmp.find('#header-content').html('Woot');
var newCompiled = $tmp.html();

snippet.log(newCompiled)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

---

If you are just trying to add the newly compiled element to dom, then there is no need to create a tmp div, instead you can

var compiled = '<div><div id="header-content">Test</div></div>';

var $tmp = $(compiled)

$tmp.find('#header-content').html('Woot');

$tmp.appendTo('body')

div {
  border: 1px solid red;
  padding: 5px;
}
#header-content {
  background-color: lightgrey
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>