javascript - 如何在使用 Jquery 展开 div 元素后找到 html

Question

我有以下html代码

<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>

这是html内容

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

我需要在变量中获取以下 htm

<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>

我试过下面的代码

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

变量“文本”将获得一个对象，我需要变量中的 html 内容。请帮我找到它。

他们是否有可能从 etherpad 导出自定义的 html 或 xml 格式？

Answer 1

希望对您有所帮助!

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>