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