Javascript 附加<；元素>；，[属性]，以及；不动产；元素对自身的影响？ 我的目标：

我使用创建Flexbox网格系统的自定义元素、属性和属性

为了帮助我直观地调试流程，我需要一些javascript

我想将

中的所有

、

[属性]

和

“属性”

的文本用Javascript附加到它们自身（仅限）

目前，我正在使用

css

的

：：before

和

：：before

和

：：before

伪元素，但正如您所想象的，，，这可能非常耗时

到目前为止，我得到的是：

---

示例：

如果我有这个：

    <div id="div" class="ninja"></div>

---

这是无效的标记，为什么要这样做？我正在使用Polymer为我正在使用的flexbox网格系统创建

。我正在努力学习如何在此过程中使用Flexbox。这将帮助我快速直观地看到正在发生的事情，而无需查看引擎盖下。您最好只打开开发工具并使用它们。否则，听起来您只是想转义元素并将其添加到自身中，本质上就是

node.textContent=node.outerHTML

。我就是这样做的。我创建它的主要原因是为了让我的大脑的“肌肉记忆”为Flexbox的工作原理而工作。在屏幕上直观地看到它只会加快我的进程。我发现学习起来还是很难的。那就去胡闹吧，或者。就你只用于教育目的的代码的一个不切实际的问题寻求帮助对将来的任何人都没有帮助。我对此有点困惑。。。似乎不起作用。

    <div id="div" class="ninja">
        <div id="div" class="ninja">
    </div>

    <script>
      var body       =  document.querySelector('body').attributes;
      var main       =  document.querySelector('main').attributes;
      var section    =  document.querySelector('section').attributes;
      var div        =  document.querySelector('div').attributes;
    </script>

[].forEach.call(document.querySelectorAll("*"),
  function(el){ 
    el.appendChild(
        document.createTextNode(el.cloneNode(false).outerHTML));
  });