如何在500x500新窗口中用JS/JQuery创建div？代码执行失败求助

首先，你的代码里有个关键拼写错误，这是导致元素无法追加的核心原因：getElementByClassName 应该是 getElementsByClassName（注意末尾的s）。而且这个方法返回的是一个HTMLCollection类数组对象，不是单个元素，你得通过索引获取第一个匹配的元素才行。

另外，用querySelector来获取元素会更简洁，它直接返回匹配的第一个元素，能减少这类错误的出现。

修正后的JS代码方案 #

方案1：修正getElementsByClassName的使用 #

newWindow = window.open("replaceWindow.html", "newWindow", "width=500,height=500");
newWindow.onload = () =>{
  let newDiv = newWindow.document.createElement("div");
  newDiv.className = "card-body";
  // 修正拼写，同时取第一个匹配的.contain元素
  const containElement = newWindow.document.getElementsByClassName('contain')[0];
  if(containElement){ // 先检查元素是否存在，避免控制台报错
    containElement.appendChild(newDiv);
  }
}

方案2：使用querySelector更简洁直观 #

newWindow = window.open("replaceWindow.html", "newWindow", "width=500,height=500");
newWindow.onload = () =>{
  let newDiv = newWindow.document.createElement("div");
  newDiv.className = "card-body";
  // querySelector直接定位第一个.contain元素
  const containElement = newWindow.document.querySelector('.contain');
  if(containElement){
    containElement.appendChild(newDiv);
  }
}

额外注意事项 #

• 一定要确认replaceWindow.html页面的DOM结构里确实存在class="contain"的元素，否则代码再正确也找不到目标节点。
• 留意浏览器同源策略：如果replaceWindow.html和当前页面不在同一个域名、协议或端口下，浏览器会阻止你操作新窗口的DOM，这种情况下需要确保两个页面同源，或者配置好跨域相关权限。

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