仅使用 class 将 div 插入现有 div

Question

我正在尝试在 Javascript 中创建一个新的 div，其中包含两个跨度，每个跨度包含一个文本字符串。然后将它们插入 div.inner 中的 div.two 之前。

我试图将其插入的 div 只有一个 class，不幸的是我无法通过任何 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]);
}

错误：

Cannot read property '1' of undefined at window.onload

Answer 1

使用JQuery

$(document).ready(function(){
    $(`<div>Important text 1<span></span>Important text 2<span></span></div>`).insertBefore( ".inner .two" );
)

我鼓励您使用 JQuery，然后稍后再转为原版 javascript。您只需几行代码就可以完成这样的简单任务，因此它也很容易调试

Answer 2

主要问题是 getElementsByClassName returns 节点的实时集合而不是一个节点，因此您需要访问该列表中的正确节点，类似于数组：targetDiv[0]，也许。

更简单的方法是使用querySelector来抓取你想要的元素，使用它的class，例如：

var parent = document.querySelector(".inner");
var two = document.querySelector(".two");
parent.insertBefore(infobox, two);

但是！您甚至可以在此处使用一种快捷方法，它允许您将 HTML 字符串直接添加到 DOM，这可能会为您节省一些时间和一些代码。

// 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>

insertAdjacentHTML

Answer 3

由于这些行，这不起作用

var targetDiv = document.getElementsByClassName("inner");
targetDiv.insertBefore(infobox, targetDiv.childNodes[1]);

document.getElementsByClassNamereturns一个NodeList。 targetDiv.childNodes 是 undefined，因为 childNodes 在 NodeList 上不存在。

您需要使用像Array.prototype.forEach这样的列表操作，将getElementsByClassName更改为getElementByClassName（注意s）或访问节点列表中的第一个节点使用数组索引器语法。

我假设你打算做这样的事情：

var targetDiv = document.getElementByClassName('inner')
targetDiv.insertBefore(infobox, targetDiv.childNodes[1])

这将在具有 class inner.

的第一个 DOM 节点的第一个和第二个子节点之间插入一个节点

Answer 4

试一试，由于 getElementsByClassName 方法，targetDiv 默认是一个数组，即使它只有一个 element.Hence，您也需要指定索引，即 0（因为它是数组的第一个元素）

var targetDiv = document.getElementsByClassName("inner")[0]; targetDiv.insertBefore(infobox, targetDiv.children[1]); }

仅使用 class 将 div 插入现有 div

Inserting div into existing div with class only

javascript

appendchild