如何用JavaScript将div插入第一个<body>标签？游戏脚本求助

你的代码里已经尝试了获取第一个<body>标签，但存在几个关键错误导致功能失效，以下是修正方案和问题说明：

1. 可靠获取第一个<body>的方式 #

可以使用两种稳定的选择器，确保拿到页面里的第一个<body>元素：

// 方式1：通过getElementsByTagName获取第一个元素
const firstBody = document.getElementsByTagName('body')[0];
// 方式2：通过querySelectorAll获取第一个元素
const firstBody = document.querySelectorAll('body')[0];

2. 你的代码中的关键错误修复 #

• 变量顺序错误：你先执行了element.innerText = style;，但style变量在后续才定义，此时style为undefined，导致样式完全不生效。需要把样式定义移到使用它的代码前面。
• 类名赋值错误：DOM元素的类名不能直接用class属性赋值（class是JavaScript保留字），要改用className或classList.add()：

  // 错误写法
  sda.class = "dropdown";
  // 正确写法二选一
  sda.className = "dropdown";
  sda.classList.add("dropdown");
  

• 下拉菜单结构错误：你把下拉内容(dropdown-content)嵌套在按钮内部，正确结构应该是.dropdown容器同时包含按钮和下拉内容，而非按钮嵌套内容。
• Canvas操作错误：document.getElementsByTagName("canvas")返回类数组集合，不能直接整体插入DOM或设置ID，需要取单个元素操作。

修正后的完整代码 #

// 先定义样式，避免变量未定义
var style = `
#pas {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 25px;
  color: #ff0000;
  font-family: Roboto;
}

#canvas {
    background-image: linear-gradient( 358.4deg,  rgba(249,151,119,1) -2.1%, rgba(98,58,162,1) 90% );
}
.startMenu {
    color: #000;
}
.startMenuHolder .changelogHolder {
    opacity: 0;
}
.startMenuHolder .linkHolder {
    opacity: 0;
}
#html {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    height: 230px;
    width: 230px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}
#canvas {
    position: absolute;
}
#holdingmusicstuff {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 320px;
}
.musics {
    position: relative;
    top: 0;
    left: 0;
    width: 20px;
    height: 35px;
    padding: 0;
    margin: 0;
}
.dropdown {
    position: absolute;
    top: 0;
    left: 0;
}
.dropbtn {
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background: #eee;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-content {
    display: block;
}
`;

document.onkeydown = function (e) {
  console.log(e);
  if (e.key === "p") {
    asd();
  }
};

// 插入样式到head
var styleElement = document.createElement('style');
styleElement.innerText = style;
document.head.appendChild(styleElement);

// 创建下拉菜单结构
const dropdownContainer = document.createElement("div");
dropdownContainer.className = "dropdown";

const dropdownBtn = document.createElement("button");
dropdownBtn.className = "dropbtn";
dropdownBtn.textContent = "功能菜单";
dropdownContainer.appendChild(dropdownBtn);

const dropdownContent = document.createElement("div");
dropdownContent.id = "myDropdown";
dropdownContent.className = "dropdown-content";
dropdownContainer.appendChild(dropdownContent);

const a1 = document.createElement("a");
a1.textContent = "Taking Over";
dropdownContent.appendChild(a1);

const a2 = document.createElement("a");
a2.textContent = "其他功能";
dropdownContent.appendChild(a2);

// 获取第一个body并插入菜单
const firstBody = document.getElementsByTagName('body')[0];
firstBody.appendChild(dropdownContainer);

function asd() {
  var audio1 = new Audio('https://cdn.discordapp.com/attachments/967213871267971072/1027416621318414406/8mb.video-Vf9-wfenD0dA.m4a');
  audio1.play();
};

// Canvas操作修正
const canvas = document.getElementsByTagName("canvas")[0];
if (canvas) {
  canvas.id = "canvas";
  // 若需移动canvas位置，可执行：firstBody.appendChild(canvas);
}

额外提示 #

• 建议把脚本放在DOMContentLoaded事件中执行，确保DOM完全加载后再操作元素：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有代码放入此处
  });
  

• 页面存在两个<body>标签不符合HTML规范，但上述方案可强制将元素插入第一个<body>。

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