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?

"Obviously jQuery does not return a variable it should directly affect the 'hist' input, right" Obviously that is incorrect, as otherwise hist wouldn't contain a string anymore. It's crazy to think that any method would be able to manipulate a variable containing a string directly, strings are base values, the only time it would retain it's value and just update would be if you're updating a property on an object. — user400654
– user400654, Commented Sep 17, 2015 at 14:47
I meant return variable as in var new_hist = $(hist).find("div").addClass("test"); So what are you saying? It's not possible? — Chad Caldwell
– Chad Caldwell, Commented Sep 17, 2015 at 14:51

jaunt · Accepted Answer · 2015-09-17 15:13:18Z

4

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);

edited Sep 17, 2015 at 15:13

jaunt

5,1194 gold badges35 silver badges58 bronze badges

answered Sep 17, 2015 at 14:58

pedromendessk

3,7062 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chad Caldwell Over a year ago

that did it! Thank YOU!

user1641172 Over a year ago

which is the same as what I posted 6 mins before you, I just used $.parseHtml instead.

user400654 Over a year ago

@NickDewitt Yes, all of the answers are correct, the op can choose whichever he/she wants, whichever he/she found was most helpful.

Chad Caldwell Over a year ago

@NickDewitt I tried the parseHtml and it didn't seem to work? I apologize if they are both correct, I am still learning jQuery and can be confusing. If they are both correct it was certainly my fault attempting to use it.

user1641172 Over a year ago

@Chad no worries mate, I chucked it in a fiddle to show it works now anyways.

user400654 · Accepted Answer · 2015-09-17 15:10:16Z

3

The variable isn't a string, it contains a string. Your method took that string, converted it into a DOM fragment, and then returned that dom fragment wrapped in a jQuery object. Therefore, you'll have to store the dom fragment in the variable in place of the original string, or store it in a new variable.

var somevar = $(hist).find("div").addClass("test").end();

console.log($("<div>").append(somevar).html());

Strings cannot be manipulated, instead, when you do anything with a string, the result is a new string or value, not the original. Therefore, there's no way to modify the value of the string in the variable without replacing what's stored in that variable. The same is true for integers, floats, undefined, and null. (i might have missed one or two.) Objects on the other hand CAN be manipulated, so anything that's based on objects (arrays, functions, etc) can be manipulated without creating a new object.

edited Sep 17, 2015 at 15:10

answered Sep 17, 2015 at 14:52

user400654

95.1k16 gold badges168 silver badges188 bronze badges

4 Comments

Chad Caldwell Over a year ago

not sure why but when I tried this method it manipulated the entire dom? the log showed the entire container? I really appreciate your help an insight.

user400654 Over a year ago

I suspect you forgot the < and > surrounding the div on the last line. Basically, i created one more dom fragment that would hold your dom fragment so that i could easily get the entire dom fragment back into htmlstring form. You could also just console.log(somevar) to get it as a dom frag wrapped in a jQuery object instead.

Chad Caldwell Over a year ago

just tried it again, strange it added the test class to the inner divs not all? I'm assuming that's what .end() did? Not really sure.

user400654 Over a year ago

No, your snippet is supposed to only add it to inner divs. .find() will only find inner divs of the outer, not including the outer.

score 2 · Accepted Answer · 2015-09-17 15:59:26Z

2

Have you tried parsing the string first?

var html = $('<div class="panel panel-default">')
$(html).find("div").addClass("test");
alert(html.prop('outerHTML'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Sep 17, 2015 at 15:59

answered Sep 17, 2015 at 14:53

user1641172

Collectives™ on Stack Overflow

Can not change string with HTML using jQuery?

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related