Javascript - 得到孩子的孩子

Question

如何在span下的dom中设置li>a>元素的内在html？

        <li class="first">
          <a>
            <span aria-hidden="true">1</span>
          </a>
        </li>

我尝试了类似的东西，但没有写任何内容：

element[i].childNodes[1].children.innerHTML = number;

Answer 1

children is an HTMLCollection。 innerHTML仅适用于HTML元素。在使用innerHTML之前，您需要在子项中找到HTML元素。

混合使用childNodes和children并没有多大意义。使用前者可以在浏览器之间实现更高的兼容性，使用后者可以使用更简单的方法，只允许您考虑元素节点。

＆＃13;

＆＃13;

var li = document.querySelector("li");
var number = 13;
li.children[0].children[0].innerHTML = number;

＆＃13;

<ul>
  <li class="first">
    <a>
      <span aria-hidden="true">1</span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用querySelector：

＆＃13;

＆＃13;

var li = document.querySelector("li");
var number = 13;
li.querySelector("a").innerHTML = number;

＆＃13;

<ul>
  <li class="first">
    <a>
      <span aria-hidden="true">1</span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议使用jQuery（http://jquery.com） 然后使用可以简单地做

$('li > a > span').html('THE INNER HTML HERE');

或

$('li > a').find('span').html('THE INNER HTML HERE');

您可以使用.first()查找find（）函数的结果来获取第一个元素