Can not change string with HTML using jQuery?

Question

I can't for the life of me figure out what I'm doing wrong here? Why wouldn't this work? I'm trying to manipulate an HTML string with jQuery, I ultimately am going to insert history data within the id=hist, but right now I'm just trying to get it to manipulate the HTML string and can't.

var hist = '<div class="panel panel-default"> \
            <div class="panel-heading" style="background-color:#FFFF00">History</div> \
            <div class="panel-body" id="hist"> \
            </div> \
        </div>';

$(hist).find("div").addClass("test");
console.log(hist);

The output is the exact same as the hist variable. NO changes? I know there's a simple answer I just can't figure it out. Obviously jQuery does not return a variable it should directly affect the hist input, right?

Answer 1

Well, it's due to the fact that you're trying to print the original String. However, Strings are immutable in JavaScript.

Try to do this instead:

var elem = $(hist);
elem.find("div").addClass("test");
console.log(elem);