Is there any alternative to jQuery .after() function

Question

I am trying to convert my jQuery script into javascript. I have a problem there..

I have a script that creates a node

var new_node = document.createElement("div");
      new_node.className="tooltip";
      new_node.innerHTML = html;
      alert(new_node.className);

When i do this

jQuery(link).after(new_node);

It works fine. But I want to do it javascript way. I have tried using appendChild function but it gives some strange results.

Please help me out with this.

Answer 1

You're comparing jQuery's after with appendChild, but they do very different things. after puts the element after the reference element, appendChild puts it inside it.

You probably want insertBefore (with the reference node being link's nextSibling).

So:

var link = /* ... get the `a` element from somewhere ... */;
var new_node = document.createElement("div");
new_node.className="tooltip";
new_node.innerHTML = html;
link.parentNode.insertBefore(new_node, link.nextSibling);

If link is the last thing in its parent, that's fine; link.nextSibling will be null and insertBefore accepts null as the reference node (it means "insert at the end").