Non-jQuery way to change HTML / the DOM

[johnsmith153]

I'm looking at a non-jQuery way to change HTML / the DOM.

So if I have this:

<ul class="class-name" data-value="the-value" data-abc="1">
<li>etc.</li>
<li>etc.</li>
<li>etc.</li>
</ul>

… and I want to change it to:

<input type="text" class="class-name" value="the-value" />

So, that would:
- remove all <li> inside
- convert to <input type="text"> (or another specified input type)
- convert the data-value attribute to a value attribute
- maintain any other attributes if applicable (e.g. an id)
- remove the data-abc attribute (not all data- attributes, just a chosen one)

… this isn't any specific need, I just want to be able to make changes without jQuery.

I will usually always grab the required element from a data- attribute, and I have this to start me off. Can someone help me compete this so I can create all other ones myself?

var e = document.querySelectorAll('[data-abc]');
	
for (i = 0; i < e.length; i++) {
 
}

[Old Pedant]

I assume you know that querySelectorAll is not available with MSIE 7 and below? Do you care?

Anyway, it seems simple enough.

var ul = document.querySelectorAll('[data-abc]')[0]; // assumes there is only one match
// first, remove all the <li>s
while ( ul.hasChildNodes )
{
    ul.removeChild( ul.lastChild );
} 
// now build the replacement element:
var inp = document.createElement("input");
inp.className = ul.className; //clone class name
inp.value = ul.getAttribute("data-value");
// if you wanted any other attributes copied, you would need to do so one by one
//
// now replace the <ul> with the <input>
ul.parentNode.replaceChild( inp, ul );

Should work. There's no easy way to copy all the data-xxx properties except your chosen ones. You could iterate through all the properties, looking for certain names, but that's tedious. Surely, in real life, you would know exactly which properties you are going to keep?

[Old Pedant]

By the by, isn't an <input> without either ID or NAME kind of useless?

And if you didn't notice, I did not set the type of the <input>. text is the default type, so why bother?

[Old Pedant]

If you wanted the code to be universal, you could do:

var uls = document.getElementsByTagName("ul");
for ( var u = 0; u < uls.length; ++u )
{
    var ul = uls[u];
    if ( ul.getAttribute("data-abc") != null )
    {
        ... same code as above performed on the ul object ... 
    }
}

That should work even in MSIE 7.