jquery - Prepend divs without closing them

Question

I want to prepend the following within a div using Jquery:

<div class="section map-wrapper">
    <div class="wrapper section group inner-map-wrapper">
        <div class="col span_12_of_12">

To do this I'm using the following Jquery:

// prepend a 'previous' button to all form-rows except the first    
$('<div class="section map-wrapper">').prependTo($('.mpfy-tags-list'));
$('<div class="wrapper section group inner-map-wrapper">').prependTo($('.map-wrapper'));
$('<div class="col span_12_of_12">').prependTo($('.inner-map-wrapper'));

The problem with this is that it's closing each div, which I don't want it to do. How can I prepend the html at the top exactly as it is? I'll then append the closing divs later on.

Answer 1

You can't.

Despite the abstraction it offers, jQuery doesn't operate on HTML, it operates on a DOM (where there are no start tags and no end tags, just elements).

Build the DOM you want to prepend, and then prepend it.

var $wrapper = $('<div class="section map-wrapper">');
var $inner = $('<div class="wrapper section group inner-map-wrapper">')
var $col = $('<div class="col span_12_of_12">');
$inner.prepend($col);
$wrapper.prepend($inner);
$('.mpfy-tags-list').prepend($wrapper);