Question

I have the following HTML code on my page. There is no containing element, it’s just in the body.

<b>SqFt per Carton: </b>24.30<br>

Using script, I want to wrap 24.30 in a span tag with a class so the result will look like this:

<b>SqFt per Carton: </b><span class="sqft_cart">24.30</span><br>

How can I do this?

Answer 1

Since you don’t have a containing element you can use .nextSibling() to get the text node for 24.30. Then .insertAdjacentHTML() inserts the new span after deleting the old text node. Since I don’t know what the rest of your page looks like, I’ll assume there could be multiple <b> elements, but the code will work either way.

Demo: http://jsfiddle.net/ThinkingStiff/6ArzV/

Script:

var bs = document.getElementsByTagName( 'b' );

for( var index = 0; index < bs.length; index++ ) {

    if( bs[index].innerHTML.indexOf( 'SqFt per Carton:' ) > -1 ) {
        var text = bs[index].nextSibling,
            span = '<span class="sqft_cart">' + text.nodeValue + '</span>';
        text.parentNode.removeChild( text );
        bs[index].insertAdjacentHTML('afterEnd', span);
    };

};

HTML:

<b>SqFt per Carton: </b>24.30<br>
<b>Price per Carton: </b>193.00<br>
<b>SqFt per Carton: </b>12.90<br>
<b>Price per Carton: </b>147.00<br>
<b>SqFt per Carton: </b>14<br>

CSS:

.sqft_cart {
    color: red;
}

Output: