converting code from jquery to pure javascript

Question

I want to loop though some links and add a number to the href, so it would be something like x.php&ref=333.

<div id="maindiv">
<span><a href="x.php&ref="></a></span>
<span><a href="x.php&ref="></a></span>
<span><a href="x.php&ref="></a></span>
</div>

How do I write this in pure javascript? Here is the jQuery code:

$('#maindiv a').each(function(){
var hr = $(this).attr('href');
$(this).attr('href' , hr+333 );
})

For some reason I can't use that and need to write the code in pure javascript . Specifically, I don't know how to get each a element.

possible duplicate of What's the best way to loop through a set of elements in JavaScript? — No Results Found
– No Results Found, Commented Feb 16, 2012 at 18:47

James Hill · Accepted Answer · 2012-02-16 18:59:09Z

3

Pure JS versions:

Option One

// Get div element. jQuery equivalent: $('#maindiv')
var mainDiv = document.getElementById("maindiv");

// Get all anchors in element. jQuery equivalent: $('#maindiv a') (or many others)
var myAnchors = mainDiv.getElementsByTagName("a");

// Loop through each anchor element and update href
for (var i = 0; i < myAnchors.length; i++) {
    myAnchors[i].href = myAnchors[i].href + "YourString";
}

Option Two (tiny bit less readable)

// Get div element and corresponding anchors. jQuery equivalent: $('#maindiv a')
var myAnchors = document.getElementById("maindiv").getElementsByTagName("a");

// Loop through each anchor element and update href
for (var i = 0; i < myAnchors.length; i++) {
    myAnchors[i].href = myAnchors[i].href + "YourString";
}

Additional Information

Check out document.getElementById and element.getElementsByTagName ON MDN.

edited Feb 16, 2012 at 18:59

answered Feb 16, 2012 at 18:50

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

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

Comments

Paul Grime · Accepted Answer · 2012-02-16 18:50:09Z

1

var els = document.querySelectorAll('#maindiv a');
for (var i = 0; i < els.length; i++ ) {
    var hr = els[i].href;
    els[i].href = hr + 333;
}

answered Feb 16, 2012 at 18:50

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

Comments

Steve Davis · Accepted Answer · 2012-02-16 18:58:15Z

1

This should be the cleanest way to do it.

var links = document.getElementById('maindiv').getElementsByTagName('a');
for (i in links) {
  links[i].href = links[i].href + '333';
}

answered Feb 16, 2012 at 18:58

Steve Davis

1,0091 gold badge12 silver badges25 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-02-16 19:06:10Z

1

Try this.

var anchors = document.getElementById("maindiv").getElementsByTagName("a");
for(var i = 0; i < anchors.length;i++){
    anchors[i].href = anchors[i].href + "333";
}

document.getElementById returns the element with matching id within the document.

document.getElementsByTagName returns the element with matching tag within the document. But if you call getElementsByTagName on an already selected element like above it will look within that element.

edited Feb 16, 2012 at 19:06

answered Feb 16, 2012 at 18:49

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

James Hill Over a year ago

it appears that you've rolled back my edit. getElementsByTagName{"a"); should be getElementsByTagName("a");

James Hill Over a year ago

No worries - I knew it was with a 27.7k user :)

Collectives™ on Stack Overflow

converting code from jquery to pure javascript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related