[英]Move HTML Code between comment (incl. comments)
I have the below HTML special content between comments 我在注释之间有以下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>
I need to wrap the HTML content between the comments <!--Special Content-->
and <!--/Special Content-->
including the comments themselves into a <div>
and move it below the <p id="reference">
element. 我需要将HTML内容包装在注释<!--Special Content-->
和<!--/Special Content-->
并将注释本身放入<div>
并将其移至<p id="reference">
元素。
I have no access to the actual HTML template so it needs to be done via JavaScript or JQuery. 我无权访问实际的HTML模板,因此需要通过JavaScript或JQuery完成。
I haven't be able to find a way to wrap the content including the comments so far. 到目前为止,我还无法找到一种方法来包装包括评论在内的内容。
End result should be: 最终结果应为:
<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>
I appreciate your ideas. 感谢您的想法。
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>
This will move all the content between your special comment tags after the reference id tag. 这会将所有内容在参考ID标签之后的特殊注释标签之间移动。
let move = false; let parse = $('body').contents().each(function(k,v){ if( v.nodeType === 8 ){ if( v.nodeValue === "Special Content" ) move = true; else if( v.nodeValue === "/Special Content") move = false; } else if(move && v.nodeType === 1) $(v).insertAfter('#reference'); });
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.