Jquery replaceWith deletes the content

Question

On mobile and tablet, I need to replace the <span>content</span> with a select/option tag.

I'm not sure why this is not working, as the options deletes the content inside.

Any idea on how to make this select option tag wrap around my spans?

 var $window = $(window); var windowsize = $window.width(); function wrapContent(){ if (windowsize < 800) { $('.pick-country > span').each(function () { $(this).replaceWith('<option></option>'); }); $('.pick-country > option').wrapAll('<select class="country-list"></select>'); } } wrapContent(); $(window).resize(wrapContent); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pick-country"> <div class="country">PICK A COUNTRY</div> <span id="London" class="London hotspot">London</span> <span id="CapeTown" class="CapeTown hotspot">Cape Town</span> <span id="Beijing" class="Beijing hotspot">Beijing</span> <span id="Tokyo" class="Tokyo hotspot">Tokyo</span> <span id="HongKong" class="HongKong hotspot">Hong Kong</span> <span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span> <span id="Singapore" class="Singapore hotspot">Singapore</span> <span id="Mumbai" class="Mumbai hotspot">Mumbai</span> <span id="Shanghai" class="Shanghai hotspot">Shanghai</span> <span id="Sydney" class="Sydney hotspot">Sydney</span> <span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span> <span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span> <span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span> <span id="Dallas" class="Dallas hotspot">Dallas</span> <span id="NewYork" class="NewYork hotspot">New York</span> <span id="Dubai" class="Dubai hotspot">Dubai</span> </div> 

Answer 1

From JQuery docs on replaceWith() :

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

So, you'll have to add the content manually on each interation of the replace:

 var $window = $(window); var windowsize = $window.width(); function wrapContent(){ if (windowsize < 800) { $('.pick-country > span').each(function () { $(this).replaceWith('<option>'+ $(this).html() +'</option>'); }); $('.pick-country > option').wrapAll('<select class="country-list"></select>'); } } wrapContent(); $(window).resize(wrapContent); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pick-country"> <div class="country">PICK A COUNTRY</div> <span id="London" class="London hotspot">London</span> <span id="CapeTown" class="CapeTown hotspot">Cape Town</span> <span id="Beijing" class="Beijing hotspot">Beijing</span> <span id="Tokyo" class="Tokyo hotspot">Tokyo</span> <span id="HongKong" class="HongKong hotspot">Hong Kong</span> <span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span> <span id="Singapore" class="Singapore hotspot">Singapore</span> <span id="Mumbai" class="Mumbai hotspot">Mumbai</span> <span id="Shanghai" class="Shanghai hotspot">Shanghai</span> <span id="Sydney" class="Sydney hotspot">Sydney</span> <span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span> <span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span> <span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span> <span id="Dallas" class="Dallas hotspot">Dallas</span> <span id="NewYork" class="NewYork hotspot">New York</span> <span id="Dubai" class="Dubai hotspot">Dubai</span> </div> 

Answer 2

You are replacing them with a blank option.

You could do the following:

$(this).replaceWith('<option id="' + $(this).attr('id') + '">' + $(this).text() +'</option>');

 var $window = $(window); var windowsize = $window.width(); function wrapContent(){ if (windowsize < 800) { $('.pick-country > span').each(function () { $(this).replaceWith('<option id="' + $(this).attr('id') + '">' + $(this).text() +'</option>'); }); $('.pick-country > option').wrapAll('<select class="country-list"></select>'); } } wrapContent(); $(window).resize(wrapContent); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pick-country"> <div class="country">PICK A COUNTRY</div> <span id="London" class="London hotspot">London</span> <span id="CapeTown" class="CapeTown hotspot">Cape Town</span> <span id="Beijing" class="Beijing hotspot">Beijing</span> <span id="Tokyo" class="Tokyo hotspot">Tokyo</span> <span id="HongKong" class="HongKong hotspot">Hong Kong</span> <span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span> <span id="Singapore" class="Singapore hotspot">Singapore</span> <span id="Mumbai" class="Mumbai hotspot">Mumbai</span> <span id="Shanghai" class="Shanghai hotspot">Shanghai</span> <span id="Sydney" class="Sydney hotspot">Sydney</span> <span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span> <span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span> <span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span> <span id="Dallas" class="Dallas hotspot">Dallas</span> <span id="NewYork" class="NewYork hotspot">New York</span> <span id="Dubai" class="Dubai hotspot">Dubai</span> </div> 

Answer 3

You are not retaining the text of the original span or its ID value. Just add those to the appended elements using text() and attr() :

  $('.pick-country > span').each(function () {
        $(this).replaceWith($('<option/>').text($(this).text()).attr({'value': this.id, 'id': this.id});
  });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vyyw59c2/11/

Or if you pref, using a function parameter to replaceWith() like this:

    $('.pick-country > span').replaceWith(function () {
        return $('<option/>').text($(this).text()).attr({'value': this.id, 'id': this.id});;
    });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vyyw59c2/10/

Answer 4

replace this line:

$(this).replaceWith('<option></option>');

with this:

$(this).replaceWith('<option>'+$(this).html()+'</option>');

edit (options with ids):

 $(this).replaceWith('<option id='+$(this).attr("id")+'>'+$(this).html()+'</option>');

Answer 5

Try something like this:

$('body').append('<select></select>');

$('.pick-country > span').each(function (elem) {
    $('select').append('<option>' + $(elem).text() + '</option>');
});

Answer 6

Replace with replaces the entire content, rather than the tags.

You could do:

$('.pick-country > span').each(function () {
    $(this).html("<option>" + $(this).html() + "</option");
});

Which is retrieving all of the HTML within the span object and inserting option around it.

My original post incorrectly used HTML to parse through and find instances of span within the object, which is incorrect because span would not be part of the HTML returned.