Get the id of the first div element inside a container div

Question

I've cut down my page to just the relevant content. See code here:

let text = document.getElementById("apanelofcontent").firstChild.id;
console.log(text);

<div class="apanelofcontent" id="apanelofcontent">
  <div class="panel1" id="panel1" name="panel1">
    <p>Content goes here</p>
  </div>
  <div class="panel1link" id="panel1link">
    <p><a href="#ex1" rel="modal:open">Open modal</a></p>
  </div>
</div>

All I want to do is get the id value from the first div to appear within the div with the apanelofcontent as id.

So in the above example I want the console to display the text panel1 as that’s the id of the first div to appear within the div with apanelofcontent as id.

If I run the above, all I get in the alert window is undefined. What am I doing wrong?

Youssouf Oumar · Accepted Answer · 2022-07-24T10:53:42.050

firstChild could be just a text node, that space before the div, which doesn't have an id. You could use firstElementChild, which gets you the first element node, like so:

<html>
  <div class="apanelofcontent" id="apanelofcontent">
    <div class="panel1" id="panel1" name="panel1">
      <p>Content goes here</p>
    </div>
    <div class="panel1link" id="panel1link">
        <p><a href="#ex1" rel="modal:open">Open modal</a></p>
    </div>
      <script>
        let text = document.getElementById("apanelofcontent").firstElementChild.id;
        window.alert(text);
      </script>
  </div>
</html>

score 0 · Answer 2 · answered Jul 24 '22 at 10:46

This prints panel1 to console:

let firstDivChildId = document.querySelector('div#apanelofcontent > div:first-of-type').id;
//window.alert(firstDivChildId );
console.log(firstDivChildId  )

<div class="apanelofcontent" id="apanelofcontent">
  <div class="panel1" id="panel1" name="panel1">
    <p>Content goes here</p>
  </div>
  <div class="panel1link" id="panel1link">
    <p><a href="#ex1" rel="modal:open">Open modal</a></p>
  </div>
</div>

Get the id of the first div element inside a container div

2 Answers2