Replacing DIVs with List Items inside form

Question

I'm trying to format and change the structure of a standard HTML form. At the moment the output looks like this

    <form accept-charset="UTF-8"  autocomplete="off" method="POST">
            <ol class="questions">
                <div>
                     <label>First Name *</label>
                     <input type="text" />
                </div>
                <div>
                     <label>Email *</label>
                     <input type="text" />
                </div>
                <div class="submit">
                      <input type="submit" value="Submit" />
                </div>
            </ol>
      </div>
    </form>

I need to change the divs to list items and then add a span around the labels if possible.

I've got this so far but it's not altering unfortunately.

  window.onload = function() {        
    var widgetHTML = $('ol.questions').html();
        widgetHTML = widgetHTML
            .replace(/<div>/g, '<li>')
            .replace(/<\/div>/g, '</li>');
    $('ol.questions').html(widgetHTML);
  };

Any ideas to add the span and replace the DIVs to LIs that would be great

score 1 · Accepted Answer · answered Nov 19 '14 at 15:38

1

Use .replaceWith() and .wrap():

$("form div").replaceWith(function(){
    $(this).find('label').wrap('<span/>');
    return $('<li>' + this.innerHTML + '</li>')
});

jsFiddle example

This will give you:

<form accept-charset="UTF-8" autocomplete="off" method="POST">
    <ol class="questions">
        <li>
            <span><label>First Name *</label></span>
            <input type="text">
        </li>
        <li>
            <span><label>Email *</label></span>
            <input type="text">
        </li>
        <li>
            <input type="submit" value="Submit">
        </li>
    </ol>
</form>

answered Nov 19 '14 at 15:38

j08691

204,283
31
260
272

If I wanted to progress this further, and wrap the contents of the form inside a div, would I create a separate function? – DIM3NSION Nov 19 '14 at 16:13
Thanks for the fast response, - I think I confused things a little I mean to wrap a div called form-contents inside the form tag not the form within a div. :) – DIM3NSION Nov 19 '14 at 16:32
great help. With your existing code, this replaces all the classes that were on the div's. Is there anyway to preserve the class names. So for instance
turns into

– DIM3NSION Nov 19 '14 at 17:06

You could change the return line to `return $('

' + this.innerHTML + '

')` but that would include undefined classes for divs that didn't have a class, so you might want to expand the logic to check for empty classes first. – j08691 Nov 19 '14 at 17:16

Jamiec · Answer 2 · 2014-11-19T15:47:18.687

This should do it.

$('ol.questions div').each(function(){
  $('label',this).wrap('<span/>');
  var children = $(this).children();
  $(this).replaceWith($('<li/>').append(children));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8"  autocomplete="off" method="POST">
            <ol class="questions">
                <div>
                     <label>First Name *</label>
                     <input type="text" />
                </div>
                <div>
                     <label>Email *</label>
                     <input type="text" />
                </div>
                <div class="submit">
                      <input type="submit" value="Submit" />
                </div>
            </ol>
    </form>

Looks like you didn't get the span wrapping part. – j08691 Nov 19 '14 at 15:42 — j08691, Nov 19 '14 at 15:42
@j08691 - Thanks, yes I did indeed miss that. – Jamiec Nov 19 '14 at 15:47 — Jamiec, Nov 19 '14 at 15:47

score 0 · Answer 3 · edited May 23 '17 at 12:05

Use the following jQuery function for changing the type:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    }
})(jQuery);


// USAGE
$("div").changeElementType("li");

(https://stackoverflow.com/a/8584217/1017882)

Use the following code to wrap your labels with a span:

$("label").wrap("<span></span>");

NOTE: You'll need to refine the selectors as you see fit. The selectors above will work given the markup you've posted, but I assume you have other divs and labels on your page.

Replacing DIVs with List Items inside form

3 Answers3