Как получить innerhtml дочернего элемента элемента по ID javascript

Question

Вот мой html, мне нужно получить значение innerhtml класса span, являющегося дочерним элементом класса div.

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

Моя первая мысль была JS У меня есть ниже, но класс пядь я ищу не всегда имеют одинаковый индекс. Есть ли способ получить первого ребенка?

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

Answer 1

Вы можете использовать ванильный JS для выполнения этой задачи

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

Answer 2

Как вы используете 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 3

Пожалуйста, используйте это в качестве селектора:

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