Question

是否可以生成关闭div标签的注释，让我们来看看这个。考虑普通HTML ：

<div id="content">
...
...buch of html or whateve
</div>

带评论的

：

<div id="content">
    ...
    ...buch of html or whateve
    </div><!--End of content-->

依此类推每个div元素并注释它的结尾？

Answer 1

使用jQuery，这非常简单。

jQuery('div').after('<!--end of content-->');

编辑：

jQuery('div').each(function(){ jQuery(this).after('<!-- end of '+jQuery(this).id + '-->');});

Answer 2

这是PHP中使用DOM的可能解决方案：
使用PHP可以保存它，或者你需要的任何东西;因为它使用的DOM非常标准化，所以将它翻译成另一种语言不需要太多的工作。
（并且从对您的问题的评论判断，您没有排除JS的其他语言）

$html = <<<HTML
<div id="content">
...
...buch of html or whateve
</div>
HTML;

$dom = new DOMDocument();
$dom->loadHTML($html);
$divs = $dom->getElementsByTagName('div');
for ($i = $divs->length - 1 ; $i > -1 ; $i--) {
    $div = $divs->item($i);
    if ($div->hasAttribute('id')) {
        $id = $div->getAttribute('id');
        $comment = $dom->createComment("End of {$id}");
        if($div->nextSibling) {
            $div->parentNode->insertBefore($comment, $div->nextSibling);
        } else {
            $div->parentNode->appendChild($comment);
        }   
    }
}
echo $dom->saveHTML();

它为您提供以下HTML源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<div id="content">
...
...buch of html or whateve
</div>
<!--End of content-->
</body></html>

有几点需要注意：

DOM允许加载和解析无效的HTML
并生成有效的HTML

而且，关于它的作用：

使用DOMDocument
搜索所有<div>代码
Foreach <div>标记：
- 如果它具有id属性，
- 获取其价值
- 根据该值创建评论
- 并在</div>标记

考虑到它的另一个解决方案可能是使用XPath，而不是getElementsByTagName + hasAttribute ......

Answer 3

var divs = document.getElementsByTagName("div");
for (var d = divs.length-1; d >= 0; --d) {
   var div = divs[d];
   var id = div.id;  // d.getAttribute("id")
   if (id) {
     var cmt = document.createComment("End of " + id);
     div.parentNode.insertBefore(cmt, div.nextSibling);
   }
}

是否可以为html生成结束注释

3 个答案: