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?

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