Get innerHtml by data-id

user_10089690 0
Viewed 1864

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);
innerhtml html javascript
4 Answers
document.querySelector('[data-id="1123066248731271"]').textContent
user_29519330

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

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>

user_33784200

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.

user_41747890
Related