Jquery switching elements while they are inside a variable

Question

I'm having a little difficulty trying to switch 2 elements around with Jquery when they are inside a string variable.

eg:

var myString = 
              "<div class='chatMessage'>Something here 
               <div class='test'>My test</div>
               <div class='anotherTest'> the other test</div>
               Something there
               </div>";

What I would like is to switch the two classes around, making "anotherTest" be infront of "test".

What I've tried so far is:

var myString = 
              "<div class='chatMessage'>Something here 
               <div class='test'>My test</div>
               <div class='anotherTest'> the other test</div>
               Something there
               </div>";

var div1 = myString.filter('.test');
var div2 = myString.filter('.anotherTest');

var tdiv1 = div1.clone();
var tdiv2 = div2.clone();

myMessage = div1.replaceWith(tdiv2);
myMessage = div2.replaceWith(tdiv1);

However I receive the following error

t.replace is not a function

I was wondering how I would be able to achieve to switch the two divs around while still stored inside the variable before displaying it to the user?

@MaciejKozieja Yes I want to switch them inside the string, after that I will push it towards the end user, so I don't have to switch them while they are on screen. — killstreet, Mar 08 '17 at 10:48
@CaptainMagikarp Oh, I actually made the mistake of div2 not having the dot infront, because I want to select it on the class. — killstreet, Mar 08 '17 at 10:49
@evolutionxbox Yeah I know, that's another part I'm wondering about why I'm getting that error actually. — killstreet, Mar 08 '17 at 10:49
@MaciejKozieja I know I can append it, and switch them around later, but I do not wish to re-format it while it's already on screen. I want to switch it before I display it to the user. — killstreet, Mar 08 '17 at 10:54
@killstreet jQuery is mainly for work with DOM elements, not string. What you are doing here is almost heresy. — Dinei, Mar 09 '17 at 02:25

score 2 · Accepted Answer · answered Mar 09 '17 at 02:25

You're making things harder on yourself by adding the constraint that this needs to be done by direct string manipulation. HTML is meant to be rendered into the DOM -- and since that's a "document object model" it stands to reason it's better-suited for modelling your document as objects.

jQuery may seem a bit old-hat, but its whole purpose is to make querying the DOM easier, so it works well here. All you need to do is parse the string, query the node you want to move, and insert it before the element you want it in front of. You can get the HTML back using $.fn.html(), or you could just leave as an element if you're going to insert it somewhere on your page.

var $el = $(myString);
$('.anotherTest', $el).insertBefore($('.test', $el));
var myMessage = $el.html();

jsfiddle here

This is exactly what I was looking for. This allows me to manipulate a string before displaying it. — killstreet, Mar 09 '17 at 15:52

Zorak · Answer 2 · 2017-03-08T11:08:21.113

Try this one. Just split the string by "</div>", it will make an array of splited contents, then re-add "</div>" to each splited string (this will be consumed in the process of splitting). Then reassemble.

https://jsfiddle.net/8a4wgn7k/

var myString = "<div class='test'>My test</div><div class='anotherTest'> the other test</div>";


var res = myString.split("</div>");
res[0] +="</div>";
res[1] +="</div>";
var switchedString=res[1]+res[0]

Jquery switching elements while they are inside a variable

2 Answers2