InsertAfter Not Working With Html

I have a p Element and try to wrap it inside a span. then insert it after the p tag with the id output. I tried it like this, but the insertAfter is not doing it's job. I also t

Solution 1:

You forgot the last '>' in your closing tag for the $myspan variable

You have:

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

and it should be

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

Best

Solution 2:

You can rather use .wrap() to wrap an HTML structure around element in the set of matched elements.

$('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>