javascript - Jquery 在变量中切换元素

Question

当 2 个元素位于字符串变量中时，我在尝试使用 Jquery 切换它们时遇到了一些困难。

例如:

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

我想要的是调换这两个类，使“anotherTest”位于“test”之前。

到目前为止我尝试过的是:

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

但是我收到以下错误

t.replace is not a function

我想知道如何在将两个 div 显示给用户之前将其存储在变量中的同时切换两个 div？

Answer 1

您通过添加需要通过直接字符串操作来完成的约束，让事情变得更加困难。 HTML 旨在呈现到 DOM 中——由于这是一个“文档对象模型”，因此它更适合将文档建模为对象。

jQuery 可能看起来有点过时，但它的全部目的是使查询 DOM 更容易，所以它在这里工作得很好。您需要做的就是解析字符串，查询要移动的节点，然后将其插入到您想要移动的元素之前。您可以使用 $.fn.html() 取回 HTML，或者如果您要将它插入页面的某处，您可以将其作为元素保留。

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

jsfiddle here