asked on

jQuery Add HTML before and after

I want to add html to a page before and after certain div's.

<script>
$(document).ready(function () {
    $("#personal_information").before("<div class='personal-info-cont'>");
    $(".email_text").after("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>");

//  AND I HAVE TRIED

 $("<div class='personal-info-cont'>").insertBefore("#personal_information");
    $("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>").insertAfter(".email_text");

Open in new window

As you can see I added the closing div after: $(".email_text").after
But that does not work. <div class='personal-info-cont'></div> automatically closes itself when I do it this way.
And The closing div here ($(".email_text").after("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>");) Does not show up.
I want to surround a few fields on a form with a div that I can hide.

HainKurt

check this

https://jsfiddle.net/z3b6fwtd/

is this what you want?

HainKurt

check this one too...

https://jsfiddle.net/fp8vxs3w/

the issue is you cannot add partial element like that...

when you add "<div class='personal-info-cont'>" the actually it is added as "<div class='personal-info-cont'></div>"

HainKurt

but you can do this if your structure is something like this:

<div id="container">
  <div id=personal_information>#personal_information</div>
  <div class=email_text>.email_text</div>
</div>

Open in new window

var div = $("<div class='personal-info-cont'><div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</button></div></div>")
var pi = $("#personal_information").detach();
var et = $(".email_text").detach();
div.prepend(pi);
div.prepend(et);
$("#container").prepend(div);

Open in new window

and after code runs

<div id="container">
  <div class="personal-info-cont">
    <div class="email_text">.email_text</div>
    <div id="personal_information">#personal_information</div>
    <div class="suffix_text_wccpf_fields">
      <button id="personal_info_next" type="button">NEXT</button>
    </div>
  </div>
</div>

Open in new window

https://jsfiddle.net/n3o17onw/

HainKurt

oops, we need to add personal_info first then email_text

before

<div id="container">
  <div id=personal_information>#personal_information</div>
  <div class=email_text>.email_text</div>
</div>

Open in new window

code

var div = $("<div class='personal-info-cont'><div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</button></div></div>")
var pi = $("#personal_information").detach();
var et = $(".email_text").detach();
div.prepend(et);
div.prepend(pi);
$("#container").prepend(div);

Open in new window

after

<div id="container">
  <div class="personal-info-cont">
    <div id="personal_information">#personal_information</div>
    <div class="email_text">.email_text</div>
    <div class="suffix_text_wccpf_fields">
      <button id="personal_info_next" type="button">NEXT</button>
    </div>
  </div>
</div>

Open in new window

demo
https://jsfiddle.net/HainKurt/8m2afe2v/

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

ASKER

@Julian, what about when there are multiple div's that I want to wrap in one container?

Like:

<div  id="first_name">FN</div>
<div id="middle_name">MN</div>
<div  id="last_name">LN</div>

//  So It looks like this after the script runs

<div class='personal-info-cont'>
  <div  id="first_name">FN</div>
  <div id="middle_name">MN</div>
  <div  id="last_name">LN</div>
</div>

Open in new window

Robert Granlund

ASKER

.wrapAll is what I was looking for. Thanks Julian

Julian Hansen

You are welcome