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

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>

我期望的结果：文本区域内部：

<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说您必须将其解析为对象，然后更改它并将其粘贴回元素中。

演示

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)

Demo2

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中的标记/元素，但它们是文本区域的text/值。您需要获取textarea值(或text(，然后使用jquery对其进行解析，以便操作标记/元素。

---

这是我想到的-输出是小写的(因为HTML标签现在是小写的(，格式也不理想，因为HTML不需要空白-你可以把它传递到一个"；漂亮的印刷品；以获得不同的输出

将文本解析为标签

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的根元素。使用innerHTML/.html()作为第一个或使用.outerHTML作为第二个输出最终结果。