javascript - 获取动态元素来更改文本

Question

我的网页中有一个动态元素，当我单击图标时会出现这样的动态元素:

<span class="elasticbar-item text-right text-baseline">
      <button class="button primary" data-next-button="">MY TEXT</button>
</span>

但我想用新文本更改来自服务器(我无权访问)的默认文本。

我之前尝试过的表示为:

var buttonIntervalCheck = setInterval(function () {
  var button = $("[data-next-button]");

  if(button.length === 1) {
    button.text("NEW TEXT");
    clearInterval(buttonIntervalCheck);
  }
}, 1000);

Google Chrome 中的示例

第一个结果是当我点击我的图标时。第二个结果是当我对按钮上的按钮(Ctrl+Shift+I)进行检查时。

而且我不明白到底是如何工作的。我该如何修复它？

Answer 1

尝试在控制台上运行此命令:

$("[data-next-button]").text("NEW TEXT");

如果它工作正常，那么你的时机是错误的。您可能在 DOM 加载之前调用 button.text。尝试将代码包装在准备好的函数中:

$(function() {
  var buttonIntervalCheck = setInterval(function () {
  var button = $("[data-next-button]");

  if(button.length === 1) {
    button.text("NEW TEXT");
    clearInterval(buttonIntervalCheck);
  }
}, 1000);
});