Trouble Replacing Multiple Links With iFrame Via Javascript
<p>I'm trying to parse a page with javascript to replace links belonging to a specific class with an iframe to open a corresponding wikipedia page [so that rather than having a link you have an embedded result]. The function detects links properly but something about the replaceChild() action causes it to skip the next instance... as if it does the first replace and then thinks the next link is the one it just worked on, probably as a result of the loop.</p>

<p>For example, if there's 2 links on the page, the first will parse and the second will not even be seen but if there's 3, the first two will be parsed using the attributes from the first and third.</p>

<p>Can anyone suggest an alternative way of looping through the links that doesn't rely on a count function? Perhaps adding them to an array?</p>

<p>Sample Links</p>

<pre><code>&lt;a href="http://www.foo.com/" class="myspeciallinks" data-searcht="the hoover damn"&gt;wiki it&lt;/a&gt;
</code></pre>

<p>Sample Javascript</p>

<pre><code>(function(){    
    var lnks = document.getElementsByTagName("a");
    for (var i = 0; i &lt; lnks.length; i++) {     
        lnk = lnks[i]; if(lnk.className == "myspeciallinks"){       
            newif=document.createElement("iframe");
            newif.setAttribute("src",'http://www.wikipedia.com');
            newif.style.width="500px";
            newif.style.height="100px";
            newif.style.border="none";
            newif.setAttribute("allowtransparency","true");
            lnk.parentNode.replaceChild(newif,lnk);     
        }   
    }   
})();
</code></pre>
