Question

我有以下div，并且想要更改显示“没有账户？”的文字。到其他的东西。

我尝试过$('a#createAccount').text'some text)或.html('some text'); 与$('.create p')相同，但会删除<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>

仅更改使<a>保持不变的文本

Answer 1

您可以选择锚标记，将其放入变量中，覆盖您的段落内容，然后将锚标记附加回去。

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

对于每个How do I select text nodes with jQuery?，您可以利用链接函数将匹配的元素过滤到父元素内的文本节点，然后将其data属性设置为所需的文本：

$(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&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>

Answer 4

尝试使用document.write并更新所需的内容

while condition:
    this statement is executed inside the while 
    this statement is executed inside the while
this statement is NOT executed inside the while

Answer 5

~~您是否必须使用jQuery来执行此操作？如果没有，您可以只使用普通的旧javascript，为什么不尝试document.getElementById('createAccount').innerHTML = 'some text';~~

因此，在理解了您的要求之后，我可以通过以下方法完成此任务：

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

如何更改元素的文本而不影响其子元素？

5 个答案: