Question

I am using Jquery for my web application and I am creating a numeric updown box. For this I am replacing an input <input type="text"> field with a pre defined div.

Thing is I want to get the html of the original input box as it may have styles etc added that I would like my .replaceWith version to have also.

e.g.
Current code <input type="text">
New Code

<div>
   <input type="text">
   <div>
      <!-- Other Stuff -->
   </div>
</div>

So as you can see I need to regenerate the input control along side making a parent element. The way I do this at present is just regenerate everything and use the .replaceWith() method to paste it all.

Any Ideas?

Answer 1

I’m not entirely sure what you’re trying to do, but it looks like you want to wrap a parent div around the input, and add another div after it. If that’s the case, you can do something like this:

$("input").wrap("<div></div>").after("<div></div>");

This way, you don’t need to replace the input, as it will stay in the DOM. wrap will wrap the argument around the selected element, and after will insert content after the selected element.

Here’s a working example.