Javascript .innerHTML but excluding inner div

user_6743686 0
Viewed 1219

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.

innerhtml dom html javascript
6 Answers

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.

user_8481640

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

You can use like this:

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

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>

user_38605310

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>

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

user_28416070
Related