insertAfter 不使用 html答案

【问题标题】：insertAfter not working with htmlinsertAfter 不使用 html
【发布时间】：2016-08-01 22:50:49
【问题描述】：

我有一个 p 元素并尝试将其包装在 span 中。
然后将其插入到 ID 为 output 的 p 标记之后。

我这样尝试过，但 insertAfter 没有做好它的工作。

$mytext = $("p#test").html();
$myspan = "<span style='color:red'>"+$mytext+"</span";

$($myspan).insertAfter("p#output");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">Test</p>
<p id="output">OUTPUT:</p>

我也用append 尝试过这个方法：

$mytext = $("p#test");
$mytext_html = $mytext.html();

$myspan = "<span style='color:red'>"+$mytext_html+"</span";
$("p#output").append($myspan);
$mytext.remove();

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

<p id="test">Test</p>
<p id="output">OUTPUT:</p>

我该如何解决这个问题？

【问题讨论】：

试着在一个分步列表中解释你的意图，因为你的句子很混乱。

标签： javascript jquery html

【解决方案1】：

您忘记了 $myspan 变量的结束标记中的最后一个“>”

你有：

     $myspan = "<span style='color:red'>"+$mytext+"</span";

应该是

     $myspan = "<span style='color:red'>"+$mytext+"</span>";

最好的

【讨论】：

哦...谢谢。我想知道为什么它在我的第二个示例中使用append，即使我也忘记了>
嗯，这是个好问题。经过一番研究， .append() 似乎会自动将结束标签添加到您的字符串中。您可以在没有整个的情况下自己尝试，您会看到 .append() 实际上为您关闭了标签

【解决方案2】：

您可以使用 .wrap() 将 HTML 结构包裹在匹配元素集中的元素周围。

$('p#test').wrap('<span style="color:red"></span>');

$('p#test').wrap('<span id="testspan" style="color:red"></span>');
$('#testspan').insertAfter('#output');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<p id="test">Test</p>
<p id="output">OUTPUT:</p>

【讨论】：