0

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:[email protected]">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/

Improve this question
5

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-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.

Improve this answer

4 Comments

I was marked down because? Considering those are the methods you would use and the api you should be using to do this?
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?
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.
@Nomad101 Good for you :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.