Non-jQuery changing HTML / the DOM

Hi,

Maybe a good way to go about it would be to grab any <ul> elements with a class name of "class-name"
Harvest all of the attributes you need.
Discard the rest.
Create a new input element.
Replace the <ul> element with the <input> element.

Here is a script that does that.
It's not complete (in so far as it doesn't do everything you request above) and could do with some optimizing, but hopefully it will point you in the right direction.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript DOM manipulation</title> <style>input {display:block;}</style> </head> <body> <ul class="class-name" data-value="the-value" data-abc="1"> <li>etc.</li> <li>etc.</li> <li>etc.</li> </ul> <ul class="class-name2" data-value="the-value2" data-abc="2"> <li>etc.</li> <li>etc.</li> <li>etc.</li> </ul> <ul class="class-name" data-value="the-value3" data-abc="3"> <li>etc.</li> <li>etc.</li> <li>etc.</li> </ul> <div id="newstuff"></div> <script> var c = "class-name"; var lists = document.getElementsByTagName("ul"); for (var i = 0; i < lists.length; i++) { var nodes=[], values=[]; for (var attr, j=0, attrs=lists[i].attributes, l=attrs.length; j<l; j++){ attr = attrs.item(j) nodes.push(attr.nodeName); values.push(attr.nodeValue); } if (values.indexOf(c) >= 0){ lists[i].parentNode.removeChild(lists[i]); var input = document.createElement("input"); input.type = "text"; input.className = c; input.value = values[nodes.indexOf("data-value")]; document.getElementById("newstuff").appendChild(input); } } </script> </body> </html>