Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Non-jQuery way to change HTML / the DOM

    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++) {
     
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,586
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    I assume you know that querySelectorAll is not available with MSIE 7 and below? Do you care?

    Anyway, it seems simple enough.

    Code:
    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?
    Last edited by Old Pedant; 12-19-2012 at 05:31 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,586
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,586
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    If you wanted the code to be universal, you could do:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •