如何使用原生JavaScript定位footer标签下的子元素并插入HTML内容？

你的代码逻辑基本正确，只有一处关键错误，修正后就能正常工作：

错误点说明 #

window.onload=loadThing(); 这里的括号会让函数立即执行，而不是等页面加载完成后触发。正确写法是只传递函数引用，不加括号。

修正后的完整代码 #

function loadThing() {
  // 精准定位footer下class为menu-footer的div元素
  var targetDiv = document.querySelector('footer .menu-footer');
  // 在目标div内部末尾插入HTML内容
  targetDiv.insertAdjacentHTML('beforeend', '<p>Stuff to add</p>');
}

// 页面加载完成后执行函数，注意不要加括号
window.onload = loadThing;

补充说明 #

• 选择器footer .menu-footer是正确的，能准确选中你要操作的div元素。
• insertAdjacentHTML的beforeend参数正好对应你注释里的插入位置（元素内部的最后位置）。
• 如果想避免使用window.onload，也可以把脚本放在页面的</body>标签之前，这样DOM已经加载完成，直接执行函数即可：

function loadThing() {
  var targetDiv = document.querySelector('footer .menu-footer');
  targetDiv.insertAdjacentHTML('beforeend', '<p>Stuff to add</p>');
}

// 直接调用，无需等待window.onload
loadThing();

内容的提问来源于stack exchange，提问作者ultraloveninja