Get InnerHTML of element that isnt inside another tag

Question

So if I had

<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

How would I get the InnerHTML of the outside without including anything from the inside or any other HTML tags? (bascially how to get "Hello")

Eraste

Answer 1

1 An interesting option:

This is not a serious answer, and is based on Darin Morris' highly destructive answer but is slightly less destructive:

// Clone the element
var $clone = $("#outside").clone();

// Remove all the children (leaves text nodes)
$clone.children().remove();

alert($clone.text());

http://jsfiddle.net/TrueBlueAussie/ez4v83v5/4/

Again I would not recommend this as an alternative to say

2 My serious answer:

$('#outside')[0].firstChild.nodeValue

but who knows... This technique may come in handy for someone at some point :)

Padraic

P.S. Downvoters on this answer have a) no sense of humour and b) no sense of the ridiculous :) – Padraic

Answer 2

Another option:

$(function(){
   var theHtml = $("#outside");
   var texto = theHtml[0].childNodes[0].data;
   alert((texto));
});

Fiddle:

$(function() {
  var theHtml = $("#outside");
  var texto = theHtml[0].childNodes[0].data;
  alert((texto));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outside">
  Hello
  <div id="inside">
    Qwertyuiop
  </div>
</div>
<div id="test"></div>

Euphonious

theHtml[0].firstChild.nodeValue is shorter/faster. – Padraic

I would guess the difference is a very trivial speed increase (as it avoids one array indexing operation), but I would err on the side of shorter anyway. – Padraic

Yep...it is shorter...but no faster...there is a difference between 1 or 2 miliseconds. – Euphonious

Answer 3

Try to use .contents() at this context

alert($("#outside").contents().first()[0].nodeValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

Somnambulation

Note: first()[0] is redundant. $("#outside").contents()[0].nodeValue does the same thing :) – Padraic

Answer 4

You are trying to get the value of the first child so

alert($('#outside').prop('firstChild').nodeValue)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

Haemolysin

Is it better to use prop for HTML element properties (rather than just $('#outside')[0].firstChild.nodeValue)? – Padraic

@TrueBlueAussie I really don't see much difference.. except that using .prop() will need to run some jQuery code again – Haemolysin

Okay. If you have no preference, maybe just avoid the overhead of prop then? (either will break if there is no child, so jQuery prop is not really adding any value). +1 anyway :) – Padraic

Answer 5

Array.prototype.filter.call(document.querySelector('#outside').childNodes, function (node) {
    return node.nodeValue;
});

You can also try this in Vanilla, it would also handle a case if you had other strings after the div.

Wholism

Answer 6

There probably is a better way to do this, but this should work for you:

var kids = $("#outside").children();

for(var i = 0; i < kids.length; i++)
{
    if(kids[i].nodeType != 3)
    {
        $(kids[i]).remove();
    }
}

alert($("#outside").text());

See this JSFiddle: http://jsfiddle.net/ez4v83v5/1

Aggappera

No, actually it wasn't good enough. The question did not specifically state whether or not only the first text node was specifically required or if the first text node would be the first child node of the parent. My solution solves that problem and gets all text contents regardless of the placement of the text within the parent element's contents. For what its worth, $("#outside").children().remove(); should work but it don't work in JSFiddle and so I didn't recommend it. It's possible its a bug with JSFiddle... – Aggappera

-1: All joking aside, the above code destroys the DOM elements in the process of extracting the text node value. It also uses a completely redundant for loop and if check as children does not return elements of nodeType 3. You get the same effect with $("#outside").children().remove(); jsfiddle.net/TrueBlueAussie/ez4v83v5/5 Basically it is not only DOM-destructive, but also inefficient too. – Padraic

Ok, well thats fine. There is a reason I made a point of saying 'it could probably be done better'... ("#outside").children().remove(); seems to work in your JSFiddle. – Aggappera

Answer 7

try the jquery api children, try the fiddle

$(document).ready(function(){
    alert($('#outside').clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text());

});

hope it helps...

Tetrad

The aim was to get Hello (which is a text node, invisible to children()), not Qwertyuiop. Sorry. – Padraic