What is the correct syntax for concatenating strings within jquery replaceWith

Question

I have the following html markup

<body>
  <div class="old-wrapper">
    ...lots of stuff
  </div>
</body>

I need to replace this with a coffeescript function to give the following markup

<body>
  <div class="new-wrapper">
    <input type="text" class="date-picker">
  </div>
</body>

I need to use .old-wrapper as the target

My coffeescript function looks something like this

jQuery ->
  $(".old-wrapper").repaceWith(
    $("<div class='new-wrapper'>") +
    $("<input type='text' class='date-picker'>").datepicker +
    $("</div>")
  )

What is the correct way to concatenate these strings within the replaceWith function? (Sorry this is a very basic javascript syntax question, but my javascript knowledge is limited)

score 0 · Answer 1 · answered Apr 09 '13 at 08:09

You have a syntax error to start with:

$("<div class="wrapper>")
  ^           ^        ^
open        close     ???

The rest of that code is kind of invalid as well.

Try this: $(".date-wrapper").wrapInner('<div class="wrapper" />');

You should have a look at the Tutorials section on the site: http://docs.jquery.com/Tutorials

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

~~Maybe like this..~~

jQuery ->
  $('.date-wrapper').append(
    $('<input type="text" class="date-picker" id="user_dob" value="' + dob + '" name="user[dob]" />').datepicker()
  ).wrapInner('<div class="wrapper" />')
  $('.wrapper').unwrap()

Instead of replacing the element just append your datepicker-input element, wrap it like you need it then remove wrapping element withunwrap.

edit

After rereading the question i saw that i was a bit of the wrong way ;-)

Isn't the most simple solution for your problem to simply replace all date-wrapper elements as you did already and then wrap all these by your new wrapper?

dob = '2013/4/9'
$ ->
  $('.date-wrapper').replaceWith($('<input type="text" class="date-picker" id="user_dob" value="' + dob + '" name="user[dob]" />').datepicker())      
  $('.date-picker').wrapAll('<div class="wrapper" />')

produces

<div class="wrapper">
    <input id="user_dob" class="date-picker hasDatepicker" type="text" name="user[dob]" value="2013/4/9">
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

see fiddle

score 0 · Answer 3 · answered Apr 09 '13 at 08:53

0

This should work!

jQuery ->
    $('.date-wrapper')
        .append($('<div class="wrapper" />'))
        .find('.wrapper')
        .append($('<input type="text" class="date-picker">').datepicker())

answered Apr 09 '13 at 08:53

Vitalii Ponomar

10,686
20
60
88

biofractal · Answer 4 · 2013-04-09T14:50:35.487

Here is my attempt. Note that I am looking for the class old-wrapper as per the original question.

I am also using the technique of putting inner calls into their own functions, which I think makes for much neater code.

Here is a jsFiddle showing the code below in action

getDatePicker=->$('<input/>', {type:'text', class:'date-picker'}).datepicker()

getWrapper=->$('<div/>', {class:'new-wrapper'}).append getDatePicker()

$ -> $('.old-wrapper').replaceWith getWrapper()

What is the correct syntax for concatenating strings within jquery replaceWith

4 Answers4

edit