Get value inside Div Javascript

Question

ho,

I have a div that I access like so:

 var gridcellrowvalue0 = gridcell0.innerHTML;

This returns to me the following div:

 <div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>

In my JS I would like to accesss the "DefaultText" variable and I have tried this:

 gridcellrowvalue0.innerHTML;
 gridcellrowvalue0.getAttribute("data-originaltext");

But none of them work. I'm assuming that getAttribute doesn't work because it is not really an element, it's innerhtml.

My goal is to use the "DefaultText" value in an IF-statement and therefore I simply need it.

I appreciate any pointers, my friends!

Answer 1

You could access your element directly from gridcell0 using gridcell0.querySelector('.DivOverflowNoWrap') instead, like :

var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );

Snippet:

var gridcell0 = document.querySelector('#x');

if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
  console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
  console.log('Does not exist');
}

<div id="x">
  <div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>