插入后不使用html

Question

1. 我有一个p元素，并尝试将其包装在span。
中
2. 然后将其插入p标记后面，标识为output。

我试过这样，但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>

我该如何解决这个问题？

Answer 1

你忘记了最后一个'＆gt;'在$ myspan变量的结束标记中

你有：

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

它应该是

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

最佳

Answer 2

您可以使用 invoked as an anonymous function 在匹配元素集中围绕元素包装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>