CODEWITHSUNDEEP
jqueryhtml
dEL
dEL

Reputation: 502

dynamically closing the div

here is my html structure

<div class="container">
<div class="main_section">
<div class="experience_section">
<div class="experience_paragraph_section">
<div class="experience_inner_paragraph">
<p>content 1</p>
<p>content 2</p>
<p class="lastelement"></p>
</div>
</div>
</div>
</div>
</div>

I want to write jquery which will add

</div></div></div></div></div>
<div class="container">
    <div class="main_section">
    <div class="experience_section">
    <div class="experience_paragraph_section">
    <div class="experience_inner_paragraph">

just before p class="lastelement" need help

Upvotes: 1

Views: 59

Answers (2)

Quentin
Quentin

Reputation: 943561

The browser gives you DOM to work with, not HTML, so you need to deal with that.

If you refocus your question through that lens then what you are trying to do is:

Create a div containing a bunch of other divs, move a paragraph into it, then add it to the document after some other div.

var $origional_container = $(".container");
var $last_paragraph = $origional_container.find(".lastelement");

var $new_container = $("<div>").addClass("container")
  .append($("<div>").addClass("main_section")
    .append($("<div>").addClass("experience_section")
      .append($("<div>").addClass("experience_paragraph_section")
        .append($("<div>").addClass("experience_inner_paragraph")
          .append($last_paragraph)))));

$origional_container.after($new_container);
div {
  padding: 2px;
  border: solid black 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="main_section">
    <div class="experience_section">
      <div class="experience_paragraph_section">
        <div class="experience_inner_paragraph">
          <p>content 1</p>
          <p>content 2</p>
          <p class="lastelement">Content so you can see this</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

patlach
patlach

Reputation: 174

jQuery is a tool to work with Document Object Model (DOM) - parsed html by browser - not with html markup of your document. You need to change markup on server side or if that not possible use ajax to load content and javascript string manipulation function - replace() - https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace.

Upvotes: 0

Related Questions