Categories
javascript jquery string

Replacing / Manipulating element in html string using jquery

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="https://www.faqcode4u.com/faq/238200/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.

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="https://www.faqcode4u.com/faq/238200/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