Replacing / Manipulating element in html string using jquery

Question

I have a html string (not DOM), that I want to manipulate using jquery. Why doesn't this work:

var html = '<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>'; console.log(html);  var elem = $('h4', $(html)); // replace "Headline" with "whatever" => Doesn't work elem.replaceWith("whatever");  console.log(html); 

I have a jsfiddle here for testing.

The above code is just a simplified example. The real html is much more complex, that is, I definitely need to rely on jQuery for manipulating the html string.

Answer 1

When you modify the jQuery object, it will not change the value in the string literal.

You can use

var html = '<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>'; console.log(html);  var $html = $('<div />',{html:html}); // replace "Headline" with "whatever" => Doesn't work $html.find('a').html("whatever");  console.log($html.html()); 

Demo: Fiddle