javascript - 在鼠标悬停时在具有特定类的元素之后插入 div

Question

我知道有一个非常简单的 jQuery 方法可以做到这一点，但现在我想了解为什么我的代码无法正常工作:

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

var menuHelp = document.querySelector(".menu_help");


for (var i = 0;i<menuHelp.length;i++){

menuHelp[i].onmouseenter = function(){
    menuHelpPopup = document.createElement("div");
    menuHelpPopup.setAttribute('class','menu_help_popup');
    menuHelpPopup.innerHTML = "test";
    insertAfter(menuHelp[i], menuHelpPopup);
}

menuHelp[i].onmouseleave = function(){
    menuHelpPopup.remove();
}

}

我想做的是创建一个弹出窗口并将其插入到具有特定类的元素之后，当鼠标悬停在它们上时......

演示 http://jsfiddle.net/r5e8rvkg/

Answer 1

1. 请确保 menuHelp 是一个 nodeList，因此您应该使用 document.querySelectorAll；
2. 当鼠标进入时，i的值为menuHelp.length。所以你应该使用它，比如 insertAfter(this, menuHelpPopup)