javascript - ReferenceNode.parentNode 抛出未定义

Question

我正在尝试使用 JavaScript 复制 jQuery 的 after():

var orangeBlock = '<a href="http://clo2015.chineselearnonline.com/">Try out the New Version of CLO</a></div>'
var greyBlock = document.getElementsByClassName('grey-block')

function insertAfter(newNode, referenceNode) {
  console.log(referenceNode.parentNode)
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
}

insertAfter(orangeBlock, greyBlock)

但我收到以下错误:

未捕获类型错误:无法调用未定义 theme.js 的“insertBefore”方法:62insertAfter 主题.js:62(匿名函数)

我觉得很奇怪，因为 console.log(greyBlock) 输出该项目:

[item: function]
0: div.grey-block
length: 1
__proto__: NodeList

实时站点:http://www.chineselearnonline.com/amember/member.php

Answer 1

orangeBlock 是一个字符串。您需要一个 DOM 节点才能使用 insertBefore。您可以像下面这样进行转换。

var orange = document.createElement('div');
orange.innerHTML = orangeBlock;

document.getElementsByClassName 获取节点列表。所以你需要从其中选择一个greyBlock[0]

终于有这样的事情了。

var orangeBlock = '<a href="http://clo2015.chineselearnonline.com/">Try out the New Version of CLO</a>';
var orange = document.createElement('div');
orange.innerHTML = orangeBlock;

var greyBlock = document.getElementsByClassName('grey-block');

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

insertAfter(orange, greyBlock[0]);