更改纯JavaScript中的href链接

Question

I'm creating a new DOM element so I can later populate it with data:

var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble');
document.body.appendChild(bubbleDOM);

I want to iterate over links in this newly created element to turn addresses like "something.something" into "http://www.something.something". I don't want jQuery, so I tried this without success:

var links = bubbleDOM.getElementsByTagName("a"); 
for (var i = 0; i < links.length; i++) { 
    links[i].href = "http://www." + links[i].href.value;
}

Answer 1

Couple of things stand out.

1. links[i].href.value isn't valid. Just use links[i].href .
2. You should check to make sure the href actually has something in it.

Here is an example that works for me:

var links = bubbleDOM.getElementsByTagName("a"); 
for (var i = 0; i < links.length; i++) { 
    if (!!links[i].href && links[i].href.length > 0) { // Check that there is an href
        links[i].href = "http://www." + links[i].href;
    }
}

Answer 2

links[i].href.value will always be an absolute URL, so if the attribute in HTML looks like

<a href="something.something">

then the value of links[i].href.value will be something like

"http://current.domain/something.something"

Try using getAttribute('href') instead.

Answer 3

use getters and setter to access/modify the attributes : getAttribute and setAttribue .

Here's a demo : http://jsfiddle.net/rF9qk/