Simple jQuery, changing HTML

**johnsmith153** · Oct 6, 2012 20:55

I think I'm half way there. I need to change this HTML with jQuery:

Code:

<div class="main-class">
  <div class="div1">
  content 1
  </div>
  <div class="div2">
  content 2
  </div>
</div>

$("div.main-class").each(function() {

  var holder = $(this);

  $("> div", holder).each(function(){

  //here I need to get entire div, including its contents, and place it before the main-class (and remove the old HTML)
  //holder.before() ???

}

Which should leave this:

Code:

<div class="div1">
content 1
</div>
<div class="div2">
content 2
</div>
<div class="main-class">
</div>

**Pullo** · Oct 7, 2012 01:13

Hi there,

insertBefore() is your friend: http://api.jquery.com/insertBefore/

Here's an example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div class="main-class">
      Main div
      <div class="div1">Div 1</div>
      <div class="div2">Div 2</div>
    </div>
    
    <script>
      $(document).ready(function() {
        $(".div1, .div2").insertBefore(".main-class");
      });
    </script>
  </body>
</html>

**johnsmith153** · Oct 7, 2012 10:47

Great, thanks, but I actually need to do it using the code I posted, as there's a lot more going on that I've stripped out.

My code needs to take out one at a time.

So I guess I need insertBefore, but I'm still not sure how that fits in with the code I posted:

Code:

$("div.main-class").each(function() {

  var holder = $(this);

  $("> div", holder).each(function(){

    //here I need to get entire div, including its contents, and place it before the main-class (and remove the old HTML)
    holder.insertBefore();

  }

}

**johnsmith153** · Oct 7, 2012 11:51

Got it!

$(this).insertBefore($(this).parent());

**Pullo** · Oct 7, 2012 11:56

As holder refers to <div class="main-class">, maybe this is better/easier to read:

Code JavaScript:

$(this).insertBefore(holder);

User Tag List

Thread: Simple jQuery, changing HTML

Thread Tools

Display

Simple jQuery, changing HTML

Bookmarks

Bookmarks

Posting Permissions