我正在尝试在Javascript中创建一个新的div，其中包含两个跨度，每个跨度包含一个文本字符串。然后，它们应该入到div.inner的div.two之前。
不幸的是，我尝试将其插入的div 只有一个类，不幸的是，我无法通过任何 ID 定位它。
我还在这里创建了一个代码笔：https://codepen.io/lisaschumann/pen/BXqJKY
任何帮助都非常感谢！
.HTML
<html>
<div class="inner">
<div class="one"></div>
<div class="two"></div>
</div>
</html>
.JS
window.onload=function(){
var infobox = document.createElement("div");
infobox.classList.add('infobox');
var spanOne = document.createElement("div");
var spanOneText = document.createTextNode('Important text 1');
var spanTwo = document.createElement("div");
var spanTwoText = document.createTextNode('Important text 2');
spanOne.appendChild(spanOneText);
spanTwo.appendChild(spanTwoText);
infobox.appendChild(spanOne);
infobox.appendChild(spanTwo);
var targetDiv = document.getElementsByClassName("inner");
targetDiv.insertBefore(infobox, targetDiv.childNodes[1]);
}
错误：
无法读取未定义的属性"1" at window.onload
主要问题是getElementsByClassName返回节点的实时集合而不是一个节点，因此您需要访问该列表中的正确节点，类似于数组：targetDiv[0]，也许。
更简单的方法是使用querySelector通过其类获取所需的元素，例如：
var parent = document.querySelector(".inner");
var two = document.querySelector(".two");
parent.insertBefore(infobox, two);
但是！你甚至可以在这里使用一个快捷方式方法，它允许你直接向 DOM 添加一个 HTML 字符串，这可能会节省一些时间和一些代码。
// Create the HTML
const html = `
<div>
<span>Text alpha</span>
<span>Text beta</span>
</div>`;
// Grab the element containing your "two" class
const two = document.querySelector('.inner .two');
// Using insertAdjacentHTML to add the HTML before the two element
two.insertAdjacentHTML('beforebegin', html);<div class="inner">Inner
<div class="one">one</div>
<div class="two">two</div>
</div>- 插入相邻HTML
由于这些行，这不起作用
var targetDiv = document.getElementsByClassName("inner");
targetDiv.insertBefore(infobox, targetDiv.childNodes[1]);
document.getElementsByClassName返回一个NodeList。targetDiv.childNodes是undefined的，因为childNodes在NodeList上不存在。
您需要使用列表操作，如Array.prototype.forEach，将getElementsByClassName更改为getElementByClassName(请注意s(或使用数组索引器语法访问节点列表中的第一个节点。
我假设你的意思是做这样的事情：
var targetDiv = document.getElementByClassName('inner')
targetDiv.insertBefore(infobox, targetDiv.childNodes[1])
这将在类为inner的第一个 DOM 节点的第一个和第二个子节点之间插入一个节点。
试试这个，targetDiv 默认是一个数组，因为 getElementsByClassName 方法，即使它只有一个元素。因此，您需要指定索引，即 0(因为它是数组的第一个元素(
var targetDiv = document.getElementsByClassName("inner")[0]; targetDiv.insertBefore(infobox, targetDiv.children[1]); }
使用 JQuery
$(document).ready(function(){
$(`<div>Important text 1<span></span>Important text 2<span></span></div>`).insertBefore( ".inner .two" );
)
我鼓励你使用JQuery，然后转向vanilla javascript。您可以在几行代码中完成这样的简单任务，因此也很容易调试。