.after() jQuery method in native JavaScript?

Question

I need to write the following jQuery code in native Javascript:

$("a[href $= pdf]").after("<img src='images/small_pdf_icon.gif' align='center' />");

And here's my HTML :

<ul class="navlist" id="navlinks">
    <li><a href="someurl.html">Link #1</a></li>
    <li><a name="#anchor1">Named Anchor Link</a></li>
    <li><a href="someurl.html">Link #2</a></li>
    <li><a href="someurl.pdf">Link #3</a></li>
    <li><a href="someurl.html">Link #4</a></li>
    <li><a href="someurl.html">Link #5</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.html">Link #7</a></li>
    <li><a href="mailto:joe@joe.com">Email Link</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
</ul>

I can use document.querySelectorAll('a') to get all anchor tags, but how can I write JavaScript code for .after() or .before() methods?

Please help me to convert the above jQuery code into JavaScript.

Here's the Jquery code which I've done :

http://jsfiddle.net/5dgZV/

And Here's Javascript code but I'm not able to insert image after all the Anchors :

http://jsfiddle.net/REuJP/

Show us [what you've tried](http://mattgemmell.com/2008/12/08/what-have-you-tried/). See [about Stack Overflow](http://stackoverflow.com/about). — John Conde, May 05 '13 at 16:24
http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.after might be a perfect starting point — m90, May 05 '13 at 16:27
Follow: http://stackoverflow.com/questions/3425142/adding-html-elements-with-javascript — tymeJV, May 05 '13 at 16:28
You can also use Element.insertAdjacentHTML method: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML — PokatilovArt, Nov 04 '22 at 07:12

Simon Adcock · Accepted Answer · 2013-05-05T18:20:42.133

I think this is happening because you are repeatedly trying to append the same DOM to every a tag. If you created a new element for every loop iteration, it should work:

for(var i=0;i<document.querySelectorAll('a').length;i++){
    var imgSrc=document.createElement("img");
    imgSrc.setAttribute("src", "http://i.imgur.com/YXsJZVe.gif");   
    document.querySelectorAll('a')[i].appendChild(imgSrc);
}

Working Fiddle

Nomad101 · Answer 2 · 2013-05-05T16:45:30.010

-1

while I am hesitant to show you exactly how to do this you should look into the DOM api specifically at the method insertBefore. Although you should really do a quick google search before asking questions here on SO, here is a reference to insertBefore https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore.

insertAfter is something you would setup using a custom function. like this

   insertAfter(newNode){
      var refNode = document.getElementById("xyz"); 
      refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
   }

newNode in this case is an actual DOM element. which would be created like so: var newNode = document.createElement("p");

Change p for the type of element you want to make. in your case it would be the img. You can then set the appropriate attributes/Properties and then send it to the insertAfter above. If you need to specify the refNode add an argument for it like so: insertAfter(newNode,refNode).

A way to use this with jquery would be insertAfter(newNode,$("#findme")) just so you have an idea of what is going on, obviously if you add the refNode argument remove the declaration from the function body.

edited May 05 '13 at 16:45

answered May 05 '13 at 16:28

Nomad101

1,688
11
16

I was marked down because? Considering those are the methods you would use and the api you should be using to do this? – Nomad101 May 05 '13 at 16:31
This answer would probably work better as a comment, as it doesn't really provide a solution, just a prod in the right direction. Unless you're willing to show the OP how to use the methods you have mentioned? – Simon Adcock May 05 '13 at 16:31
I've searched every where and also used insertBefore Method in javascript but I need to insert after or before all the ANCHOR TAGS like jquery does, but Javascript only inserting after one Anchor Tag , if I'm looping through anchors to put that .gif image after each anchor then also it's putting at last anchor only. – Satnam Singh May 05 '13 at 16:31
@Nomad101 Good for you :) – Simon Adcock May 05 '13 at 16:45

.after() jQuery method in native JavaScript?

2 Answers2