Add span/html element after text node using JQuery

Question

I have this example

$('span.first').append('<span class="second">2</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="first">1</span> HELLO

I get this output: 12 HELLO

I need this output: 1 HELLO 2

Please always include the relevant code in the question itself as I just did. The question should be self-contained and include all the relevant details without external links to the code — Alon Eitan
– Alon Eitan, Commented Nov 11, 2020 at 9:23
Note that @AlonEitan has done you a favour there - must people would vote close your question. The message when saving the question is there for a reason — fdomn-m
– fdomn-m, Commented Nov 11, 2020 at 9:40

Liam Pillay · Accepted Answer · 2020-11-11 16:39:15Z

1

Your code was putting the 2 as a child to the span element hence why it was displaying as 12. For the result you are after, simply append to the parent of that element instead:

$('span.first').parent().append('<span class="second">2</span>');

edited Nov 11, 2020 at 16:39

Liam Pillay

8591 gold badge9 silver badges26 bronze badges

answered Nov 11, 2020 at 9:18

A Paul

8,3033 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michal AB Over a year ago

Working. Thank you!

Collectives™ on Stack Overflow

Add span/html element after text node using JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related