Question

-1

jQuery - setting an element's text only without removing other element (anchor)

rated 0 times [ 1] [ 2] / answers: 1 / hits: 26520 / 13 Years ago, fri, may 27, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 13 Years ago saiget · Accepted Answer

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>