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?](http://stackoverflow.com/questions/157260/whats-the-best-way-to-loop-through-a-set-of-elements-in-javascript) — Wesley Murch, Feb 16 '12 at 18:47

James Hill · Accepted Answer · 2012-02-16T18:59:09.803

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.

ShankarSangoli · Answer 2 · 2012-02-16T19:06:10.760

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 '12 at 19:06

answered Feb 16 '12 at 18:49

ShankarSangoli

69,612
13
93
124

it appears that you've rolled back my edit. `getElementsByTagName{"a");` should be `getElementsByTagName("a");` – James Hill Feb 16 '12 at 19:04
No worries - I knew it was with a 27.7k user :) – James Hill Feb 16 '12 at 19:10

score 1 · Answer 3 · answered Feb 16 '12 at 18:50

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 '12 at 18:50

Paul Grime

14,970
4
36
58

score 1 · Answer 4 · answered Feb 16 '12 at 18:58

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 '12 at 18:58

Steve Davis

959
1
11
25

converting code from jquery to pure javascript

4 Answers4