我正在尝试使用 jquery 更改 textarea 内标签的顺序，但它不起作用？

Question

这是代码：

 $('#taas').find('BLOG').append($('BLOG_INFO'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="taas" style="width:100%;height:200px;"> <BLOG> <BLOG_INFO> text1 </BLOG_INFO> <POSTS> text2 </POSTS> </BLOG> </textarea>

我期望的结果：在 textarea 内：

<BLOG>
        
<POSTS>
text2
</POSTS>
        
<BLOG_INFO>
text1
</BLOG_INFO>
    
</BLOG>

为什么它不起作用？

提前致谢！

Answer 1

你可以这样做：

var blog = $($('#taas').val());
var bloginfo = blog.find("BLOG_INFO")[0].outerHTML

blog.find("BLOG_INFO").remove()
blog.append(bloginfo)

$('#taas').val(blog[0].outerHTML)

问题是您的$("#tass")不包含任何元素，而只包含文本，因此 Freedomn-m 说您必须将其解析为 object，然后对其进行更改并将其粘贴回元素中。

演示

 var blog = $($('#taas').val()); var bloginfo = blog.find("BLOG_INFO")[0].outerHTML blog.find("BLOG_INFO").remove() blog.append(bloginfo) $('#taas').val(blog[0].outerHTML)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="taas" style="width:100%;height:200px;"> <BLOG> <BLOG_INFO> text1 </BLOG_INFO> <POSTS> text2 </POSTS> </BLOG> </textarea>

你也可以做得更简单一点：

var blog = $($('#taas').val());
var bloginfo = blog.find("BLOG_INFO").insertAfter(blog.find("POSTS"))

$('#taas').val(blog[0].outerHTML)

演示2

 var blog = $($('#taas').val()); var bloginfo = blog.find("BLOG_INFO").insertAfter(blog.find("POSTS")) $('#taas').val(blog[0].outerHTML)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="taas" style="width:100%;height:200px;"> <BLOG> <BLOG_INFO> text1 </BLOG_INFO> <POSTS> text2 </POSTS> </BLOG> </textarea>

Answer 2

请注意， $("textarea").val()将始终提供一个string 。 这些看起来像 HTML 中的标签/元素，但它们是文本区域的文本/值。 您需要获取 textarea 值（或文本），然后使用 jquery 对其进行解析，以便操作标签/元素。

---

这就是我想出的 - output 是小写的（因为 HTML 标记现在是小写的）并且格式并不理想，因为 HTML 不需要使用不同的空格来传递它output

将文本解析为标签

var tags = $("<div/>").html($("#taas").val());

然后操纵并放回

 var tags = $("<div/>").html($("#taas").val()); tags.find('BLOG').append(tags.find('BLOG_INFO')); $("#taas").val(tags.html())

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="taas" style="width:100%;height:200px;"> <BLOG> <BLOG_INFO> text1 </BLOG_INFO> <POSTS> text2 </POSTS> </BLOG> </textarea>

---

快速说明

$("<div/>").html($("#taas").val());
//vs 
$($("#taas").val());

与$($("#taas").val())根元素是BLOG所以你不能做blog.find("BLOG")而$("<div/>").html($("#taas").val()); 给出div的根元素。 最终结果是 output 第一个使用innerHTML / .html() ，第二个使用.outerHTML 。