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.

Diggs

you only want the textnodes? – Velarde

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.

Greene

you might want to use Node.TEXT_NODE instead of 3 for better readability. – Velarde

Or directly el.nodeName === "#text" – Fagaceous

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

Erratic

Answer 3

You can use like this:

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

Fadge

This will return all the text – Sivas

Answer 4

Using jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var html=$('.ResCheckIn').html();
    var parsedText=$.parseHTML(html);
     $.each(parsedText, (i, el) => {
          if (el.nodeType === 3) {
          if(el.nodeValue.trim()!=""){              
             console.log(el.nodeValue);
             alert(el.nodeValue);
           }
          }
     });
  });
</script>
<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
   </div>
   Thursday, October 18, 2018
</div>

Rosebay

Answer 5

You have to use "content of node". for better understanding about this please look into this link.

There are multiple ways you can achieve your result. below is one of way,

$(document).ready(function() {
  var parentnode = document.querySelectorAll('.ResCheckIn')[0];
  console.log($(parentnode).contents().filter(function() {
    return this.nodeType == 3;
  }).text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
  </div>
  Thursday, October 18, 2018
</div>

Dragonnade

Answer 6

// Example container.
let container = document.getElementsByClassName('ResCheckIn')[0];

// Loop over child elements and remove them. Note that this is ES6 syntax and may not yet be supported in all browsers.
Array.from(container.children).forEach(em => { 
    em.parentElement.removeChild(em);
});

console.log(container.textContent);

Just a simple example. If you remove only all child elements (and not nodes) from anHTMLElement (like container in this example), the text nodes are skipped and you are left with the text only.

Gisarme