CODEWITHSUNDEEP
javascripthtmldominnerhtml
Alessandro Crotti
Alessandro Crotti

Reputation: 295

Javascript .innerHTML but excluding inner div

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.

Upvotes: 6

Views: 1922

Answers (6)

Sumesh TG
Sumesh TG

Reputation: 2575

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>

Upvotes: 1

Pawnesh Kumar
Pawnesh Kumar

Reputation: 494

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

Upvotes: 2

Jitendra G2
Jitendra G2

Reputation: 1206

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>

Upvotes: 1

Rajeev
Rajeev

Reputation: 359

You can use like this:

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

Upvotes: 1

Ram
Ram

Reputation: 144659

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.

Upvotes: 6

minitauros
minitauros

Reputation: 2030

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

Upvotes: -1

Related Questions