更改跨度文本值 JavaScript/jQuery

Question

我正在尝试针对 ID="DNTCaptchaInputText-error" 的范围（请参见图片）我希望能够将显示“此字段是必需的”的内部文本更改为更自定义的错误消息，例如“请输入安全代码”。

到目前为止，我已经尝试过：

document.getElementById('DNTCaptchaInputText-error').innerHTML = 'please type out the security 
code';

也试过了

document.getElementsByClassName('DNTCaptchaInputText-error')[0].innerHTML = 'please type out 
security code.';

到目前为止，这些似乎都不起作用，有什么想法吗？

谢谢你。

//编辑

仍然无法正常工作，这是代码

<div class="input-group"><span class="input-group-prepend"><span 
class="input-group-text"><i class="fas fa-lock"></i></span></span><input 
autocomplete="off" class="text-box form-control input-validation-error" 
data-required-msg="none" data-val="true" data-val-required="none" 
dir="ltr" id="DNTCaptchaInputText" name="DNTCaptchaInputText" 
placeholder="Enter Code" required="required" type="text" value="" aria- 
describedby="DNTCaptchaInputText-error" aria-invalid="true"></div>

<span class="text-danger field-validation-error" data-valmsg- 
for="DNTCaptchaInputText" data-valmsg-replace="true"><span 
id="DNTCaptchaInputText-error" class="">This field is required</span> 
</span>

我真的不明白为什么document.getElementById('DNTCaptchaInputText-error').innerHTML = 'New text here'; 不工作！ 一直说不能设置 null 的innerHTML 属性，我在这里尝试了所有建议的答案。

Answer 1

试试这种方式它的工作。

document.getElementById('DNTCaptchaInputText').textContent='please type out the security code';

Answer 2

您的代码看起来不错，您只需要在使用它时检查该元素是否存在。

解决方案1：

检查dom是否正确加载。 使用window.onload事件并将您的代码放入其中。

解决方案2：

添加一个标志来检查元素是否存在并将您的代码放入块中。

另外，请检查以下代码段中的两个工作解决方案。

 // will fire when everything will be loaded window.onload = function() { document.getElementById('DNTCaptchaInputText-error').textContent = 'This message will show when window is loaded'; } // just checking null for selected dom if (document.getElementById('DNTCaptchaInputText-error')) { document.getElementById('DNTCaptchaInputText-error').innerHTML = 'This is dynamic message'; }

 <p id="DNTCaptchaInputText-error">I am the default error</p>

注意： window.onload将覆盖该值，因为它在窗口加载后执行。 在这里阅读更多相关信息