定位表的第二个元素子元素的内部html

Question

我正在尝试定位表的第二个子元素。 在这种情况下，我想编写该行第二个单元格的内部HTML，即“ Travolta”。 我已经成功使用了firstChildElement和lastChildElement，但是在定位第二个孩子时遇到了麻烦。 任何帮助，将不胜感激！ 示例代码可以在下面找到：

HTML：

  <tr class="table-row">
      <td>John</td>
      <td>Travolta</td>
      <td>j.travolta@gmail.com</td>
    </tr>    

Javascript：

var rowTag = document.getElementsByClassName("table-row");

document.write(rowTag[0].firstElementChild.innerHTML);

->返回“约翰”

document.write(rowTag[0].lastElementChild.innerHTML);

->返回“ j.travolta@gmail.com”

Answer 1

由于它是第二个子元素，因此可以使用children[1] （这是一个基于0的集合）：

var text = rowTag[0].children[1].innerHTML;

请注意，现代浏览器支持firstElementChild和children ，但是如果必须支持IE8，则必须编写一个跳过非元素节点的函数。

Answer 2

也许rowTag[0].firstElementChild.nextElementSibling.innerHTML

Answer 3

像这样获取innerHTML

var tr = document.getElementsByClassName('table-row');

alert(tr[0].getElementsByTagName('td')[1].innerHTML);

Answer 4

有一个CSS选择器nth-child（）。 只需将孩子编号放在括号内即可。 使用JQuery，这将解决您的问题： $('tr.table-row>td:nth-child(2)')是使用JQuery检索所需元素的直接选择器。 设置HTML只是使用html()函数的问题，例如：

$("tr.table-row>td:nth-child(2)").html("SET HTML HERE");