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

【问题标题】：How to get innerhtml of child span of element by ID javascript如何通过ID javascript获取元素子跨度的innerhtml
【发布时间】：2015-07-16 14:52:52
【问题描述】：

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

<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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以使用 vanilla JS 来完成这个任务

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

【讨论】：

在一次通话中你不会注意到任何区别@Tushar

【解决方案2】：

当你使用 jQuery 时。

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

这将在#id1 中找到具有topmiddiv 类的<span> 元素并返回其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>

【讨论】：

【解决方案3】：

请将此作为您的选择器：

$("span.topmiddiv").html();

【讨论】：