如何在不影响其子元素的情况下更改元素的文本？

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

Answer 1

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> 

Answer 2

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> 

Answer 3

 var link = $("#createAccount"); $(".create p").html("some text ").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> 

Answer 4

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>

Answer 5

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

Answer 6

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>