insertBefore追加子节点报错及audio元素插入注意事项咨询

控制台抛出的参考节点非指定父节点直接子节点错误，来自你siguiente函数中insertBefore的调用逻辑错误：

// 你的错误代码
let parentDiv = document.getElementById('contenedor').parentNode
let btnGrid = document.getElementById('base')
parentDiv.insertBefore(audioA, btnGrid)

对照HTML结构：

• contenedor的父节点是id为seccion的<section>元素
• 你传入的参考节点#base是#contenedor的直接子节点，和parentDiv（即#seccion）隔了一层嵌套，不是#seccion的直接子元素，完全不符合insertBefore的参数要求，必然触发报错。

insertBefore核心规则：传入的参考节点必须是调用该方法的父节点的直接子元素，不能是嵌套更深的后代节点。

如果你的需求是把音频容器audioA插入到#contenedor内部、#base元素的前方，直接把父节点替换为#contenedor即可，修正后的对应代码：

const siguiente = function() {
  const base = document.getElementById('base');
  base.innerHTML = `<H2>REPRODUCIENDO...</H2>`;
  let audioA = document.createElement('div')
  audioA.setAttribute('id', 'audioA')
  // 父节点直接取#contenedor，#base是它的直接子节点，符合insertBefore参数要求
  const contenedor = document.getElementById('contenedor')
  contenedor.insertBefore(audioA, base)
}

如果你的需求是把audioA插到#contenedor的外侧、整个容器的前方，那么参考节点要替换为#contenedor本身，父节点用#seccion：

const seccion = document.getElementById('seccion')
const contenedor = document.getElementById('contenedor')
seccion.insertBefore(audioA, contenedor)

• audio属于普通DOM元素，没有特殊的插入限制，只要遵守「参考节点是调用方法的父节点的直接子元素」的规则，就不会触发同类报错
• 如果要把audio插到父节点的末尾，没必要找最后一个子节点做参考，直接用父节点.appendChild(audio元素)即可，效果和传null作为参考节点的insertBefore完全一致
• 建议先设置好audio的src、controls、preload、autoplay（如果需要）等属性，再把节点插入DOM，避免资源加载时机异常
• DOM节点是唯一引用，不要把同一个audio元素重复插入到多个位置，重复插入会把节点从原有位置移走，不会生成新的节点副本

你代码开头的元素选择器全部写错，运行时会拿不到对应元素：

// 错误写法：用了标签选择器，但页面没有<seccion>/<container>/<option-buttons>这类标签
let section = document.querySelector('seccion');
let container = document.querySelector('container');
let optionButtons = document.querySelector('option-buttons')

// 正确写法：id选择器加#，类选择器加.
let section = document.querySelector('#seccion');
let container = document.querySelector('#contenedor'); // 或者.container
let optionButtons = document.querySelector('#option-buttons')

另外你的HTML存在无效嵌套：外层<head>标签内部嵌套了<section>和重复的<head>标签，浏览器会自动修正DOM结构，可能引发意料之外的节点查询问题，建议把标题模块移到<body>内部，不要写在head标签里。

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