So I've been working on a breadcrumb navigation where I'm using JavaScript to generate a number of CSS styled HTML list elements. Each of these elements are made up of a text element and an image so that in terms of the DOM they look like this:
<li> <a href="someUrl.html"> someText <img src="someImageLocation.png" alt="someAlternativeText"/> </a> </li>
There were 3 of these links and the function was getting longer and longer, so I got to thinking about having to repeat so much redundant code so I pulled the 3 list items out of the function and created another function:
function createLink(text, uri, img, alt){ var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("href", uri); var liText = document.createTextNode(text); var liImg = document.createElement("img"); liImg.setAttribute("src", img); liImg.setAttribute("alt", alt); a.appendChild(liImg); a.appendChild(document.createTextNode(" ")); a.appendChild(liText); li.appendChild(a); return li; }
Then I called that 3 times thus:
breadCrumb.appendChild(createLink("someText", "someUrl.html", "someImageLocation.png", "someAlternativeText"));
And Bob's your Uncle and Fanny's your...
No comments:
Post a Comment