Javascript referenceNode.parentNode未定义

我试图用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)

---

实时站点：

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]);

var-orangeBlock=''；
var orange=document.createElement（'div'）；
orange.innerHTML=orangeBlock；
var greyBlock=document.getElementsByClassName（'grey-block'）；
函数insertAfter（newNode，referenceNode）{
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}
插入符（橙色，灰色[0]）；

好吧，您的

insertAfter

函数确实需要DOM节点！

orangeBlock

（字符串）和

greyBlock

（节点列表）都不是节点

所以我宁愿做一些类似的事情

// create an element using DOM methods
var orangeBlock = document.createElement("a");
orangeBlock.href="http://clo2015.chineselearnonline.com/";
orangeBlock.appendChild(document.createTextNode("Try out the New Version of CLO"));
 // access the first element in the node list
var greyBlock = document.getElementsByClassName('grey-block')[0];

function insertAfter(newNode, referenceNode) {
  console.log(referenceNode.parentNode)
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
}
if (greyBlock)
    insertAfter(orangeBlock, greyBlock)
else
    alert("could not find an element with the class 'grey-block'");

但实际上，您需要使用：

document.getElementsByClassName（'grey-block'）[0].insertAdjacentHTML（'afterend'，''）

很简单：您的

insertAfter

确实需要dom节点！

orangeBlock

（字符串）和

greyBlock

（节点列表）都不是节点！！！@Bergi哦，我怎么才能取而代之呢？奇怪的是，我仍然得到：

uncaughttypeerror:无法读取未定义的属性“parentNode”

@alexchenco:我从控制台运行了它，它似乎在工作。在正文结束之前放置

theme.js

。看起来代码是在dom元素创建之前执行的。你说得对。用

window.onload=function（）

包装所有内容使其正常工作。谢谢。哈，我不知道为什么我总是得到

未定义的
：
未捕获的TypeError:无法调用未定义的方法'insertAdjacentHTML'
@alexchenco:是的，可能是这样，我该如何解决这个问题？它确实使用
document.getElementsByCassName（'grey-block'）
获取元素，但获取
NodeList
@alexchenco:链接问题的第一个答案中提到了它。去读吧。
// create an element using DOM methods
var orangeBlock = document.createElement("a");
orangeBlock.href="http://clo2015.chineselearnonline.com/";
orangeBlock.appendChild(document.createTextNode("Try out the New Version of CLO"));
 // access the first element in the node list
var greyBlock = document.getElementsByClassName('grey-block')[0];

function insertAfter(newNode, referenceNode) {
  console.log(referenceNode.parentNode)
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
}
if (greyBlock)
    insertAfter(orangeBlock, greyBlock)
else
    alert("could not find an element with the class 'grey-block'");

 document.getElementsByClassName('grey-block')[0].insertAdjacentHTML('afterend', '<a href="http://clo2015.chineselearnonline.com/">Try out the New Version of CLO</a>')