JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <div class="main">
    ダミー内容です  
    <ul>
      <li>アイテム1</li>
      <li>アイテム2</li>
    </ul>
  </div>
  他の内容
</div>

<hr />

<div id="result1">
  結果1:
  <article></article>
</div>

<hr />

<div id="result2">
  結果2:
  <article></article>
</div>

CSS

.main ul {
  color: red;
}

JavaScript

$(document).ready(function(){
	var $content = $('#content').children('.main');
	writeResult(1, $content.html());
  
  // ダミーの<p/>を既存の内容ラップする
 	var $content_wrap_by_p = $content.wrap('<p/>');
  
  // ラッパー<p/>を選択
  var $p = $content_wrap_by_p.parent();
  
  // htmlコードを取得
  var content_with_self = $p.html();
  $content.unwrap();
  
  writeResult(2, content_with_self);
});

// 結果を書き込む関数
function writeResult(num, content) {
	$('#result' + num).children('article').html(content);
}