I have an element like this:
<td> <a>anchor</a> [ some text ] </td>
And i need to set it's text in jQuery, without removing the anchor.
The element's contents could vary in order (text before or after), and the actual text is unknown.
Thanks
New Update
This is what i came up using, assumes only a single text node:
function setTextContents($elem, text) { $elem.contents().filter(function() { if (this.nodeType == Node.TEXT_NODE) { this.nodeValue = text; } }); } setTextContents( $('td'), "new text");
The best way is to . clone() your object, . remove() all of its . children() , then go back to the object using .
jQuery text() Method The text() method sets or returns the text content of the selected elements. When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). When this method is used to set content, it overwrites the content of ALL matched elements.
Answer: Use the jQuery unwrap() method With jQuery unwrap() method you can easily remove the wrapper element and keep the inner HTML or text content intact.
Neal's answer is my suggestion. jQuery doesn't have a way to select text nodes How do I select text nodes with jQuery?.
Changing your HTML structure will make for the simplest code. If you can't do it, you can just use the childNodes property looking for nodes of type 3 (TEXT_NODE)
Here's some sample code that assumes the last node is the node you want to edit. This is a better approach than replacing the entire contents of the td because you could lose event handlers when you recreate the HTML
$('a').click(() => console.log('<a> was clicked')) $('#btn').click(() => $('.someClass').get(0).lastChild.nodeValue = " New Value");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='someClass'> <a href="javascript:void(0)">anchor</a> [ some text ] </div> <button id='btn'> Change text without losing a tag's handler</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With