jquery html 后的新元素

Question

I have this HTML:

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

And, I want use jQuery to add ap 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!

Answer 1

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>');