循环遍历h3元素[重复]答案

【问题标题】：Loop through h3 elements [duplicate]循环遍历h3元素[重复]
【发布时间】：2021-07-31 11:43:38
【问题描述】：

大家。我想做一个for 循环输出我的h3 元素。我可以为其中一个做到这一点，但要拥有所有这些，它不会输出内容。循环中的a 用于在长页面中制作我的h3 的内部链接。

function showH() {
  var x = document.getElementsByTagName("H3");

  let str = '<a href="">';
  for (var i =0; i < x.length; i++) {
    str += x[i] + "</a>";
  }
  document.getElementById("get").innerHTML = str;
}

<p id="get"></p>
<button onclick="showH()">click</button>

此代码输出：

[object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement]

【问题讨论】：

标签： javascript for-loop getelementsbytagname

【解决方案1】：

x 是一个 HTMLHeadingElements 数组。要获取文本，请使用.innerText。

您的for 循环中也有一些错误的逻辑。第一个链接将始终有效，但之后的链接将无法正确呈现，因为链接标记的开头设置为 str 并且不再添加。

function showH() {
  var x = document.getElementsByTagName("H3");
  var str = "";
  for (var i = 0; i < x.length; i++) {
    str += '<a href="">' + x[i].innerText + "</a>";
  }
  document.getElementById("get").innerHTML = str;
}

<h3>Hello</h3>
<h3>World</h3>
<h3>!</h3>
<p id="get"></p>
<button onclick="showH()">click</button>

【讨论】：