Question

我有一个大约100个元素的html文件。在我的javascript文件中，我有一个var，它使用jQuery保存html文档中的所有元素。然后我有一个var，它包含html文档中所有文本节点的元素。我想要做的是为每个非文本节点，创建一个新的子节点并将innerHTML设置为其父标记名称。我该怎么做呢？

//All elements
var elements = $("*")

//Text Nodes only
var textNodes = elements.contents().filter(function() {
    return this.nodeType == 3;
});

Answer 1

我可以提出一个更清洁的解决方案，它不会用额外的元素污染DOM树（可能有许多以*选择器为目标的元素）。为什么不使用一些CSS来使用:after伪元素显示标记名称？

首先为每个元素设置实际标记名称，然后使用此CSS显示它们：

$("*").attr('data-tag', function() {
    return this.tagName;
});

*:after {
    content: attr(data-tag);
    font-size: 10px;
    color: #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Test content</div>

希望这对你有用。

Answer 2

我不确定我是否完全理解您的问题，但这会找到所有不包含文本的节点，并在其中附加包含节点名称的节点。

//All elements
var elements = $("*")

//Text Nodes only
var nodes = elements.contents().filter(function (i) {
    if ( this.nodeType !== 3 ) {
      var el = document.createElement('div');
          el.innerHTML = this.nodeName;
      this.appendChild(el)
    }
});

在jQuery节点中放置父标记名称

2 个答案: