jquery html new element after

Question

I have this HTML:

<div data-value="1606132800">
   <span>23</span>
</div>

And, I want use jQuery to add a p tag after my span like this:

<div data-value="1606132800">
   <span>23</span>
   <p>1$</p>
</div>

I have tried:

$("div[data-value='"+key+"'] > span").html('<p>'+value.price+' '+currency+'</p>');
$("div[data-value='"+key+"']").children('span').html('<p>'+value.price+' '+currency+'</p>');

I don't want to use append because will apend altot of my p tags and every time before appends a new element i have to remove the p tag to add just 1 tag I am using this at the moment.

 $("div[data-value='"+key+"']").children('p').remove();
 $("div[data-value='"+key+"']").append('<p>'+value.price+' '+currency+'</p>');

The reason for i am trying to get a better solution is that is a bit slow and not very good solution.

Thanks for you help!

Both of your `html()` approaches are trying to put the `
` **inside** the ``. — charlietfl, Nov 02 '20 at 01:16
What makes you say it is a *"bit slow"*? Are there a lot of these? — charlietfl, Nov 02 '20 at 01:17
https://stackoverflow.com/questions/14846506/append-prepend-after-and-before — s.kuznetsov, Nov 02 '20 at 01:23
@charlietfl 84 tags every time i change or click in any element — Carlos, Nov 02 '20 at 01:52
Are you only expecting to change one each time? If so we need more details — charlietfl, Nov 02 '20 at 01:54
i want to add all the 84 p tags but i want to use html() to add and new p tag after the span tag — Carlos, Nov 02 '20 at 01:55
Well `html()` is the wrong method for what you want. There should be no perceived difference using remove and append — charlietfl, Nov 02 '20 at 03:09
Every time i move the mouse over the main element (is a calendar) have 84 p tags that add and remove, and i think thats a bit slowly, i prefered the html method but when i use the html remos my span and let only my p tag — Carlos, Nov 02 '20 at 11:04

score 1 · Accepted Answer · answered Nov 02 '20 at 12:03

Well you could clone the span the day and than when you can use your html () to put the span and the p tag again. i will let a exemple with your code:

  cloneDay[$(this).attr('data-value')] = $(this).children('span').text();

Than after you have your value as a key and your day as a value you can pick from the array the info something like this

  cloneDay[key]

 $("div[data-value='"+key+"']").html('<span>'+cloneDay[key]+'</span><p>'+value.price+' '+currency+'</p>');

jquery html new element after

1 Answers1