Question

这是我的html，我需要获取span类的innerhtml值，它是div类的子类。

<div id="id1" class="topdiv" entity="id1">
    <div class="topmiddiv">
        <p class="topmiddiv">
            <span class="topmiddiv">Text Here</span>

我的第一个想法是我在下面的JS，但我正在寻找的span类并不总是具有相同的索引。有没有办法让第一个孩子？

document.getElementById("id1").childNodes[2].innerHTML

Answer 1

当你使用jQuery时。

$('#id1 span.topmiddiv').html()

这会在<span>中找到topmiddiv个#id1个元素，并返回其innerHTML。

演示：

alert($('#id1 span.topmiddiv').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="id1" class="topdiv" entity="id1">
  <div class="topmiddiv">
    <p class="topmiddiv">
      <span class="topmiddiv">Text Here</span>
    </p>
  </div>
</div>

使用Vanilla Javascript，您可以使用querySelector。

alert(document.querySelector('#id1 span.topmiddiv').innerHTML);

<div id="id1" class="topdiv" entity="id1">
  <div class="topmiddiv">
    <p class="topmiddiv">
      <span class="topmiddiv">Text Here</span>
    </p>
  </div>
</div>

Answer 2

您可以使用vanilla JS执行此任务

document.querySelectorAll('#id1 span.topmiddiv')[0].innerHTML;

Answer 3

请将此作为选择：

HttpPatch

如何通过ID javascript获取元素子跨度的innerhtml

3 个答案: