Javascript .innerHTML but excluding inner div

Question

Considering I have this div:

<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
   </div>
   Thursday, October 18, 2018
</div>

I simply want to get the string "Thursday, October 18, 2018", so excluding the inner div. If I try with .innerHMTML:

document.querySelectorAll('.ResCheckIn').innerHTML;

It returns everything in .ResCheckIn, including the inner div with class "ResDtlLabel", so this:

<div class="ResDtlLabel tSmall tLight">
    Check-in</div>
Thursday, October 11, 2018

And ideally I would love to do that without using jQuery.

Answer 1

One option is iterating through childNodes and filtering the textNodes. The following function gets all the textNode children and stores their values in an array.

const nodes = document.querySelector('.ResCheckIn').childNodes;
const texts = [].reduce.call(nodes, function(ret, el) {
  if ( el.nodeType === 3 ) {
    ret.push(el.nodeValue.trim());
  }
  return ret;
}, []);

texts is an array of textNodes contents.

Answer 2

Not a very innovative answer but if you are looking for simple solution try this

var content = document.querySelector(".ResCheckIn").innerHTML;
    content = content.split('</div>');
    if(content[1]){
        content = content[1].trim();
    }

Answer 3

You can use like this:

document.querySelectorAll('.ResCheckIn')[0].textContent