Javascript - 得到孩子的孩子

时间:2017-04-12 10:57:12

标签: javascript

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

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

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

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

2 个答案:

答案 0 :(得分:3)

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

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

&#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;

答案 1 :(得分:-1)

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

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

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

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