移動HTML代碼註釋之間（含評論）

Question

我有如下意見之間的HTML特殊內容

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

我要評論<!--Special Content-->和<!--/Special Content-->包括評論本身之間的HTML內容包裝成一個<div>和將它移動到<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>