jQuery code in plain Javascript

Question

How can I write this jQuery code in plain Javascript?

I can't use jQuery where this is going to be used.

$(function(){
$("td#dark[height='260']").append("<a href='http://www.website.com'&gt;&lt;/a&gt;");
});

Answer 1

Try this:

var elem = document.getElementById("dark");  // #dark
if (elem && elem.nodeName == "TD" && elem.height == 260) {  // td#dark[height='260']
    var newElem = document.createElement("a");
    newElem.href = "http://www.example.com";
    elem.appendChild(newElem);
}

And for your non-standard document using the same ID on multiple elements:

var elems = document.getElementsByTagName("td");
for (var i=0; i<elems.length; i++) {
    var elem = elems[i];
    if (elem.id == "dark" && elem.height == 260) {  // td#dark[height='260']
        var newElem = document.createElement("a");
        newElem.href = "http://www.example.com";
        elem.appendChild(newElem);
    }
}

Answer 2

but the problem is that the site is very non-standard, and uses several ID dark on both td and table tags. Any ideas on how I can make it work? – mofle

You will need to loop through each HTML element within the body (xpath would be ideal), get the tag, see if its td and if so, read the height element and see if it equals 260. This is because .getElementById will only return one result as only one ID should be present, but as you say, the website is non-standard.