Perform append operations without using the id element in java script

I want to see if there is a way to define the second div without defining an ID for the element or without using an attribute, and perform the append operation inside it, for example, to say that the p element should be appended inside the second div without using id And any other attribute, let’s mention the second div.

  • More details are in the code *
     function createEle() {
            var c = document.createElement('p');
            // In this section, I want to point to that div and use append without using an ID or any other   attribute
            return ?
          }
          createEle();
        <section>
          <div>
            <div>I want the p tag to be appended in this div</div>
          </div>
        </section>

Answer

You can use a selector string instead, with only tag names. Eg section > div > div will select the nested div (it’ll select a div which is a child of a div, which is a child of a section):

function createEle() {
  const inner = document.querySelector('section > div > div');
  inner.appendChild(document.createElement('p')).textContent = 'foo';
}
createEle();
<section>
  <div>
    <div>I want the p tag to be appended in this div</div>
  </div>
</section>