Get innerHtml by data-id

Question

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); 

Answer 1

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

Answer 2

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); 

Answer 3

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.com/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>

Answer 4

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.