Question

不知为何要insertAdjasentHTML对DOM无效：

console.log(target);
console.log(`${this.errorTemplate.replace('ERROR_MESSAGE', e.message)}`);
target.insertAdjacentHTML('afterend', `${this.errorTemplate.replace('ERROR_MESSAGE', e.message)}`);

这是控制台输出：

<input class="form-control input-round is-invalid" type="text" name="login_form[email]" id="login_form_email">

<div class="invalid-feedback d-block">Please enter a valid email address</div>

因此，什么也没有发生。什么都没有插入。

Answer 1

我的坏。一切正常。只是上部函数在一批目标上运行，并且每次销毁所有先前的插入。

Answer 2

首先请确保您的errorTemplate是字符串类型而不是对象类型，否则您将收到一条错误消息，指出对象上不存在replace方法等。

在插入相邻元素时，它必须是一个字符串，因此，如果您有一个DOM元素（如段落）需要作为相邻元素插入，则将其完全定义为字符串。

在这里，replace方法是无关紧要的，它只是返回一个新字符串，因此可以忽略它来解决您的根本问题。

这里是一个示例（假设目标是无效的电子邮件地址节点元素）：

const target = document.querySelector('.invalid-feedback')
// should be a string
const errorTemplate = '<p>ERROR_MESSAGE</p>';
target.insertAdjacentHTML('afterend', errorTemplate.replace('ERROR_MESSAGE', 'NEW ERROR MESSAGE'));

<input class="form-control input-round is-invalid" type="text" name="login_form[email]" id="login_form_email">
<div class="invalid-feedback d-block">Please enter a valid email address</div>

同样，请仔细阅读官方文档以了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

JS insertAdjacentHTML（）被完全忽略

2 个答案: