コメント間を移動HTMLコード（税込。コメント）

Question

私はコメント

<p>Regular text</p> 
<p>Regular text</p> 
<!--Special Content--> 
<p>Special Content 1</p> 
<p>Special Content 2</p> 
<!--/Special Content--> 
<p>Regular text</p> 
<p>Regular text</p> 
<p id="reference">Place special content with comments below this <p> element</p> 

間のHTML特殊なコンテンツの下に、私は<div>にコメント自身を含むコメント<!--Special Content-->と<!--/Special Content-->間のHTMLコンテンツをラップする必要がありますしているとそれを<p id="reference">要素の下に移動します。

私は実際のHTMLテンプレートにアクセスできないため、JavaScriptまたはJQuery経由で行う必要があります。

これまでのコメントを含めてコンテンツをラップする方法を見つけることができませんでした。

最終的な結果は次のようになります。

<p>Regular text</p> 
<p>Regular text</p> 
<p>Regular text</p> 
<p>Regular text</p> 
<p id="reference">Place special content with comments below this <p> element</p> 
<div id="wrapper"> 
    <!--Special Content--> 
    <p>Special Content 1</p> 
    <p>Special Content 2</p> 
    <!--/Special Content--> 
</div> 

私はあなたのアイデアを感謝しています。

Answer 1

var dataElem = document.getElementById("data"); 
 

 
var doMove = false; 
 
var toMove = []; 
 

 
for (var i = 0; i < dataElem.childNodes.length; i++) { 
 
    var node = dataElem.childNodes[i]; 
 
    if (node.nodeType === Node.COMMENT_NODE && node.data === "Special Content") { 
 
    doMove = true; 
 
    } 
 
    if (doMove) { 
 
    toMove.push(node); 
 
    } 
 
    if (node.nodeType === Node.COMMENT_NODE && node.data === "/Special Content") { 
 
    doMove = false; 
 
    } 
 
} 
 

 
var targetElem = document.createElement("DIV"); 
 
targetElem.setAttribute("id", "wrapper"); 
 
dataElem.insertBefore(targetElem, document.getElementById("reference").nextSibling); 
 
for (var i = 0; i < toMove.length; i++) { 
 
    targetElem.appendChild(toMove[i]); 
 
}

<div id="data"> 
 
    <p>Regular text</p> 
 
    <p>Regular text</p> 
 
    <!--Special Content--> 
 
    <p>Special Content 1</p> 
 
    <p>Special Content 2</p> 
 
    <!--/Special Content--> 
 
    <p>Regular text</p> 
 
    <p>Regular text</p> 
 
    <p id="reference">Place special content with comments below this <p> element</p> 
 
</div>

Answer 2

これは参照IDタグの後にあなたの特別なコメントタグの間のすべてのコンテンツを移動します。

let move = false; 
 
let parse = $('body').contents().each(function(k,v){ 
 

 
\t if(v.nodeType === 8){ 
 
\t \t if(v.nodeValue === "Special Content") move = true; 
 
\t \t else if(v.nodeValue === "/Special Content") move = false; 
 
\t } 
 
\t else if(move && v.nodeType === 1) 
 
\t \t $(v).insertAfter('#reference'); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Regular text</p> 
 
<p>Regular text</p> 
 
<!--Special Content--> 
 
<p>Special Content 1</p> 
 
<p>Special Content 2</p> 
 
<!--/Special Content--> 
 
<p>Regular text</p> 
 
<p>Regular text</p> 
 
<p id="reference">Place special content with comments below thiselement</p>