How to change HTML text of node text (type 3) / how to wrap it in HTML range

Question

When finding node text (nodeType = 3), how to mess with your HTML?

In this sense, suppose the text value of the node (data or textContent) is equal to This is textual content , how to surround it with HTML - say the bold tag ... make it This is textual content .

Changing textContent also writes out HTML tags - <b>This is textual content</b>

How to make it render like This is textual content .

Javascript / jquery

Answer 1

Your question seems pretty raw DOM, but you mentioned jQuery.

Raw DOM Material:

You can create an element b , insert it before the text node, and then move the text node into it ( live example ):

 function wrapNode(textNode, tagName) { var wrapper = document.createElement(tagName); textNode.parentNode.insertBefore(wrapper, textNode); wrapper.appendChild(textNode); return wrapper; } 

Another way is to manipulate the innerHTML property of the text node parent Element , but if you notice that all the stream elements that you update in this way are replaced (so that the new ones will not have event handlers, etc. attached to the old )

Further reading:

• DOM2 Core spec - very widely supported
• HTML DOM2 Specification - Very Widely Supported
• DOM3 Core spec - mostly supported, but you need to highlight some things.
• HTML5 DOM Interfaces - Support is Changing

JQuery

jQuery basically doesn't give you raw text nodes, it's more Element focused. But you can look at wrap , wrapAll and wrapInner . wrapInner is probably closest to what you want ( live example ):

 $(parent_element_selector).click(function() { $(this).wrapInner("<b>").unbind("click"); }); 

Answer 2

Use $(selector).html('<strong>Something here</strong>');

or

create a class in CSS and then use addClass(); for text parent

Answer 3

With jQuery, you can use .wrapInner() to add a tag around some text. For example, with the following HTML

 <span>Text goes here</span> 

You can use the following jQuery code to add <b> tags

 $('span').wrapInner('<b>'); 

The result is the following HTML:

 <span><b>Text goes here</b></span> 

Answer 4

You can also try it as follows:

HTML

 <div id="test"> This is textual content </div> 

Javascript

 $('#test').wrapInner('<strong>'); 

This will surround everything inside #test with a strong tag.

Answer 5

To extend the TJ response to better meet the OP requirement, the provided function cannot be called in a loop (iterates through nodes).

Personally, I had to convert all the direct text nodes into gaps similar to the OPs planned (by reference nodeType==3 ).

The problem is that when converting nodes inside a loop, it discards the index! . Here is a finely tuned code that converts all text nodes into wrapped nodes (optimized):

 for(var txtnodes=[],nodes=XXXX.childNodes,i=0,j=nodes.length;i<j;i++) { if(nodes[i].nodeType==3) txtnodes[txtnodes.length] = nodes[i]; } for(var m=0,n=txtnodes.length;m<n;m++) { var span = document.createElement('span'); pg.insertBefore(span,txtnodes[m]); span.appendChild(txtnodes[m]); } 

This function effectively "saves them later" and converts them after the fact. Variable declarations are all compressed and inline, and all loops are optimized for long node trees.

There are no other articles on this topic on Google, so happy coding for any future adventurers.