How can I change the text of an element without affecting its child element?

Question

I have the following div and want to change the text that says "Don't have an account?" to something else.

I've tried $('a#createAccount').text'some text) or .html('some text'); Same with $('.create p'), but it removes the <a>.

<div class="create">
  <p>
    Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
  </p>
</div>

change only the text leaving the <a> unchanged

Maybe try adding the text in tags and manipulate that tag instead the whole link tag. also you mispelled yout Jquery it should be $('a#createAccount').text('some text'); here is a snippet: https://codepen.io/manuelpirez/pen/ExYEGvY — Manuel Pirez, Sep 10 '19 at 17:41

score 2 · Answer 1 · answered Sep 10 '19 at 17:47

You can select the anchor tag, put it in a variable, overwrite the content of your paragraph and then append the anchor tag back to it.

let anchor = $('a#createAccount');
let paragraph = $('.create p')
paragraph.text("New text ");
paragraph.append(anchor);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
  <p>
    Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
  </p>
</div>

score 1 · Answer 2 · answered Sep 10 '19 at 17:57

Per How do I select text nodes with jQuery?, you can leverage chained functions to filter your matched elements to the text nodes within a parent element, then set their data attribute to the text that you want:

$(document).ready(function() {
  $(".create p").contents().filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  }).each(function() {
    if ($(this).text().trim() !== "") this.data = 'some text'; // ensure that stray blank text nodes aren't caught up in this change
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
  <p>
    Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
  </p>
</div>

Below the Radar · Answer 3 · 2019-09-10T17:49:38.363

0

var link = $("#createAccount");
$(".create p").html("some text&nbsp;").append(link);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
  <p>
    Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
  </p>
</div>

edited Sep 10 '19 at 17:49

answered Sep 10 '19 at 17:39

Below the Radar

6,947
10
58
131

Didn't work. Changes the text of the link instead of the text before the link. – Amy Ruddy Sep 10 '19 at 17:41

hajdarevicedin · Answer 4 · 2019-09-10T17:49:48.010

-2

Try using document.write and update what you need

    document.write("<p>
    Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
  </p>");

edited Sep 10 '19 at 17:49

answered Sep 10 '19 at 17:38

hajdarevicedin

57
7

I don't think this will work because the href comes from the api on the fly. – Amy Ruddy Sep 10 '19 at 18:01

sys_adm_dev · Answer 5 · 2019-09-10T17:56:29.080

-2

~~Do you have to use jQuery to do this? If not and you can just use plain old javascript, why not try document.getElementById('createAccount').innerHTML = 'some text';~~

So after understanding what you were asking, I was able to accomplish this with the below:

<p id="MP"> Some text to replace <a href="#">My link</a> </p> 
<br><br> <input type="button" value="Change" onclick="Change()"/> 

<script type="text/javascript">

    function Change() { var Markup = document.getElementById('MP').innerHTML; var POS = Markup.indexOf('<a'); Markup = Markup.substring(POS); Markup = 'Some new text ' + Markup; document.getElementById('MP').innerHTML = Markup; }

</script>

edited Sep 10 '19 at 17:56

answered Sep 10 '19 at 17:41

sys_adm_dev

63
1
7

Because that changes the text on the link. I am targeting the text before the link. – Amy Ruddy Sep 10 '19 at 17:43
Oh I see what you're saying now, I misunderstood. My bad. Let me go back to the drawing board on this and see if I can't do what you want. – sys_adm_dev Sep 10 '19 at 17:45

How can I change the text of an element without affecting its child element?

5 Answers5