时间戳

首页 > 解决方案 > 我正在尝试获取所有的 innerHTML

javascript - 我正在尝试获取所有的 innerHTML

问题描述

基本上我有一堆<h2>标签，没有详细说明，我无法手动为它们分配 ID。所以我想我可以用.innerhtml某种方式获取<h2>文本并将其分配为他们的 ID，但我不知道如何开始。

这甚至可能吗？

html 看起来像这样：

<body>
   <h2>Science</h2>
   <h2>History</h2>
   <h2>Mathematics</h2>

   <script>

   </script>
</body>

标签： javascriptjquery

解决方案

正如评论所说，innerHTML除非您确定想要元素的 HTML 内容，否则应避免使用 - 使用innerText将确保您只收到纯文本

您可以使用querySelectorAll来获取h2HTMLCollection 中的所有元素

然后，您可以简单地循环并使用以下命令直接更新属性：

ele.id = ele.innerText;

或者你可以setAttribute像这样使用：

ele.setAttribute('id', ele.innerText);

.

您可能还想.toLowerCase()在 innerHTML 之后使用，只是为了拥有更标准的 ID 样式

document.querySelectorAll('h2').forEach((ele) => {
  ele.id = ele.innerText;
});

console.log(document.getElementById('History').innerText);
<body>
   <h2>Science</h2>
   <h2>History</h2>
   <h2>Mathematics</h2>

   <script>

   </script>
</body>

推荐阅读