I have many <li> with specific data-id, want to get innerHtml of first <Div>

For Example on this sample, it would to be: "World"

<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>

This is my code, that doesn't help:

var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML); 

I have many <li> with specific data-id, want to get innerHtml of first <Div>

For Example on this sample, it would to be: "World"

<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>

This is my code, that doesn't help:

var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML); 

• javascript
• html
• innerhtml

• Does this answer your question? jQuery how to find an element based on a data-attribute value? – Heretic Monkey Commented Mar 2, 2020 at 21:11
• Probably jQuery doesn’t have a .firstChild property. What error message do you get? – James Commented Mar 2, 2020 at 21:12
• The innerHTML of that element would not be "World"; it would be <div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span> You likely want the text, which you get using the text() function. – Heretic Monkey Commented Mar 2, 2020 at 21:13

4 Answers 4

document.querySelector('[data-id="1123066248731271"]').textContent

Maybe this is what you need?

Being a jquery element, you can use find() method to find all the div elements inside him, with first(), you get the first element, finally, with html(), you get its content.

var target = $('[data-id="1123066248731271"]');
alert(target.find('div').first().html());

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>

first problem $('[data-id="1123066248731271"]') returned a object of all elements with [data-id="1123066248731271"]. for target the first element, you need add [0] after : $('[data-id="1123066248731271"]')[0]

now if you want target the div element you need specify div into $ like: $('[data-id="1123066248731271"] div')[0]. Now you got the first div and you can get innerHTML with : target.innerHTML

The full code :

var target = $('[data-id="1123066248731271"] div')[0];
alert(target.innerHTML); 

and without Jquery ( more simply i think ) :

var target = document.querySelector('[data-id="1123066248731271"] div');
alert(target.innerHTML); 

Perhaps you want to use firstElementChild instead of firstChild?

Or you could use the CSS selector [data-id="1123066248731271"] > div:first-child:

  var target = $('[data-id="1123066248731271"] > div:first-child');
  alert(target.innerHTML);

Edit:

I noticed a translation error. I don't use jQuery myself, so instead of $ I used document.querySelector. But the behavior of $ corresponds to document.querySelectorAll instead. Sorry...

This should work fine:

  var target = $('[data-id="1123066248731271"] > div:first-child')[0];
  alert(target.innerHTML);

or this:

  var target = document.querySelector('[data-id="1123066248731271"] > div:first-child');
  alert(target.innerHTML);

As a non-jQuery user, I personally prefer the latter.