Question

我正在尝试编写纯javascript函数来将文本“Passed”替换为“Completed”。 div＃提示符中的HTML应该保持完整并且是可变的。这是HTML -

<div id="prompt">
  Passed
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

我尝试替换文字，但似乎没有工作

var text = document.getElementById('prompt').textContent; 
text.replace("Passed", "Completed");

也尝试了这个 -

var text = document.getElementById('prompt').innerHTML;
text.replace("Passed", "Completed");

我做错了什么？感谢帮助！

Answer 1

replace不会改变字符串，它会返回一个新字符串。字符串是不可变的。

 var text = document.getElementById('prompt');
 text.textContent = text.textContent.replace("Passed", "Completed");

实际上，您的元素包含一个可以覆盖的文本节点：

 document.getElementById('prompt').childNodes[0].textContent = "Completed";

Answer 2

如何在外部div上切换一个类，而不是替换文本。

这样你也可以自定义它的HTML。

Stack snippet

.prompt::before {
  content: 'Passed';
}
.prompt.hidden::before {
  content: 'Completed';
}
.prompt.hidden button {
  display: none;
}

/* demo styles */
.prompt button { padding: 5px 20px; }
hr { margin: 20px 0; }

<div class="prompt">
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

<hr>

<div class="prompt hidden">  
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

替换HTML中的文本，使其他HTML完整与vanilla javascript

2 个答案: