()的原因是,innerHTML会将插入的HTML代码作为字符串解析并插入到指定的元素中,但是这种方式并不会触发浏览器对插入的HTML代码进行解析和执行,因此无法在DOM中找到插入的元素。
解决这个问题的方法是使用其他方式来插入HTML代码,例如使用createElement()和appendChild()方法来创建和插入元素节点。具体步骤如下:
以下是一个示例代码:
// 1. 使用fetch API获取HTML代码内容
fetch('file.html')
.then(response => response.text())
.then(html => {
// 2. 创建新的元素节点
const div = document.createElement('div');
// 3. 将HTML代码内容赋值给新创建的元素节点
div.innerHTML = html;
// 4. 使用getElementById()获取需要操作的元素
const targetElement = div.getElementById('targetElementId');
// 5. 将新创建的元素节点插入到目标元素中
document.getElementById('container').appendChild(targetElement);
});
在上述示例代码中,我们首先使用fetch API从文件中获取HTML代码的内容,然后创建一个新的div元素节点,并将获取到的HTML代码赋值给该节点的innerHTML属性。接下来,我们使用getElementById()方法获取需要操作的元素,并使用appendChild()方法将新创建的div元素节点插入到目标元素中。
需要注意的是,使用innerHTML插入的HTML代码中如果包含了脚本代码,浏览器会执行这些脚本代码。因此,在插入HTML代码时要确保代码的安全性,避免可能的安全风险。
领取专属 10元无门槛券
手把手带您无忧上云