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="https://somewebsite.com">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

7,321
11
63
142

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

score 0 · Answer 4 · answered Aug 05 '22 at 18:50

I will answer my own question. There are ways to achieve this with JavaScript, but that would not be best practice and there is an easier way that does not involve JavaScript.

Given that this is an implementation of Azure B2C using a custom policy, this text is best handled in the policy using localization.

For example:

 <LocalizedResources Id="api.signuporsignin.en">
    <LocalizedStrings>
      <LocalizedString ElementType="UxElement" StringId="createaccount_one_link">Sign up now</LocalizedString>
      <LocalizedString ElementType="UxElement" StringId="createaccount_intro">Don't have an account?</LocalizedString>
    </LocalizedStrings>
  </LocalizedResources>

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

-1

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

59
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 6 · 2019-09-10T17:56:29.080

-1

~~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

65
1
8

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?

6 Answers6