How to find the html after unwrap the div element using Jquery

Question

I have following html code

<div class="main">
  <div id="magicdomid2" class="">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
   </div>
   <div id="magicdomid3" class=""><br></div>
   <div id="magicdomid4" class="">
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
   </div>
   <div id="magicdomid5" class=""><br></div>
   <div id="magicdomid6" class="">
     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
   </div>
</div>

Here is the html content

  var html = $(".main").html();

I need to get the following htm in a variable

<div class="main">

    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>

     <br>
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>

     <br>

     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>

</div>

I tried following code

 var text = $('div.main div').contents().unwrap().siblings('div').remove();

The variable "text" will get an object and i need the html content in a variable.. Please help me to find it.

Is their any possibility to export the customised html or xml format from etherpad ??

provide an `id` to element which you want to get as string and use this. `alert(document.getElementById('main_div').outerHTML)` — Pushpendra Kumar, Jan 11 '18 at 08:08

RonyLoud · Answer 1 · 2018-01-11T08:39:32.820

May it Help!

var htm = "";
$("div[id^='magicdomid']").each(function(i,val){
htm = htm + $(this).html();
});
$("div[class='main']").empty().html(htm);


//You can also use this for the same
$("div[id^='magicdomid']")
  .contents()
.filter(function() {
  return this.nodeType === 1;
})
  .unwrap()
  .end()      
.filter(function() {
  return this.nodeType === 3;
})
.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div id="magicdomid2" class="">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
   </div>
   <div id="magicdomid3" class=""><br></div>
   <div id="magicdomid4" class="">
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
   </div>
   <div id="magicdomid5" class=""><br></div>
   <div id="magicdomid6" class="">
     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
   </div>
</div>

n4m31ess_c0d3r · Answer 2 · 2018-01-11T08:34:34.263

unwrap and contents might not be the best to use in this case as they tend to modify the actual DOM tree rather than the html variable.

Try this:

// create empty div
var htmlContent = $('<div class="main"></div>');

// loop over magic class & append its content
$('.main .magic').each(function(i, n) {
  htmlContent.append($(this).html());
});

// wrap & move one level above to get "main" div in html string
htmlString = htmlContent.wrap('<div></div>').parent().html();

console.log(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="magicdomid2" class="magic">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
  </div>
  <div id="magicdomid3" class="magic"><br></div>
  <div id="magicdomid4" class="magic">
    <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
  </div>
  <div id="magicdomid5" class="magic"><br></div>
  <div id="magicdomid6" class="magic">
    <span class="">Get involved with Etherpad at </span>
    <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
  </div>

</div>

div having class main is stored in a variable ie, i fetched these data by using .html() function. — Ann, Jan 11 '18 at 09:40
i didn't quite understand what you are saying... `.html()` will return the contents in `string` and it would be a mess to manipulate on the string. And Using `contents` may make changes to the original DOM tree. That's why I've suggested this approach — n4m31ess_c0d3r, Jan 12 '18 at 05:00

How to find the html after unwrap the div element using Jquery

2 Answers2