使用JavaScript向Div添加子元素后无法操作样式的问题求助

我给已有子元素的父级div添加新的子div，写了JS脚本但执行后没法操作新div的style属性，控制台显示新div没有样式属性。我是JS新手，怀疑问题出在appendChild或insertBefore方法上，求帮忙排查原因。

代码示例 #

JavaScript代码 #

function preparevideo(videonaam, titel) {
  // 给视频容器添加一个div
  const nieuwetitel = document.createElement("div");
  // 给新div设置唯一ID
  nieuwetitel.id = videonaam + '-id';
  // 给div添加样式类
  nieuwetitel.className = 'page-roel-video-titel';
  // 创建文本节点
  const textnode = document.createTextNode(titel);
  // 将文本节点添加到div中
  nieuwetitel.appendChild(textnode);
  // 找到要插入的父容器
  let videomodule = document.getElementById(videonaam);
  // 将新div作为第一个子元素插入到父容器中
  videomodule.insertBefore(nieuwetitel, videomodule.children[0]);

  console.log('-------添加div后------');
  console.log('-------标题块的完整style------');
  console.log(document.getElementById(videonaam + '-id').style);
  console.log('prepare video 执行完成');
}
preparevideo("naam1","Eerste video");

HTML代码 #

<div id="naam1"></div>

问题原因及解决方法 #

1. element.style只读取行内样式
   你控制台打印的style对象仅包含直接写在元素标签上的行内样式（比如<div style="color:red">），通过CSS类（比如你设置的page-roel-video-titel）定义的样式不会出现在这个对象里。这和appendChild、insertBefore方法完全无关，只是对style属性的理解有误。

2. 正确查看/设置样式的方式

   • 要查看元素最终生效的所有样式，用getComputedStyle()：

     const titleEl = document.getElementById(videonaam + '-id');
     console.log(getComputedStyle(titleEl));
     

   • 给元素设置样式有两种常用方式：
     • 直接操作行内样式：titleEl.style.fontSize = '18px';
     • 添加/移除CSS类（推荐，样式与逻辑分离）：titleEl.classList.add('highlight-title');

3. 关于insertBefore的小说明
   你的代码里如果父容器初始没有子元素（比如示例中的naam1是空的），videomodule.children[0]会是undefined，此时insertBefore会自动把新元素追加到容器末尾，效果和appendChild一致，这部分逻辑是没问题的。

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