How to add content to an element in javascript_html/css_WEB-ITnose

JavaScript

For example:
I want to add a pair of ,
to each character in a tag. For example, change about to about

<div style="position:absolute; left:40%;" >	  		<div>	  			<br><br><strong>②</strong> 	  			<p id="pp1">T makes ss talk about the question. Then, T lets them copy each others' body language and share feelings </p>	  			<p id="pp2">about them.</p></td>   	  		</div><div>	  			********************.	  		</div>	  	</div>

That’s what I thought,
However, what should we do if there are
or

, spaces, , etc. in the tag?

var str = obj.text();				for(var i=0; i<str.len-1; i++){					s += "<span id=G_0"+index+">" + str.substring(i, i+1) +"</span>" ;			index++;}obj.html(s);

Reply to discussion (solution)

You can first filter out "
or

, spaces,  ..."

You can first filter out "
or

, spaces,  ..."

Then how to add it back according to the original style?

To keep the style unchanged

,

, What style changes will result

, What kind of style change will it cause?

I know, because the selection is not the lowest element~Thank you