How can get the text of a div tag using only javascript (no jQuery)

JavascriptHtml

Javascript Problem Overview


I tried this but showing "undefined".

function test() {
var t = document.getElementById('superman').value;
alert(t); }

Is there any way to get the value using simple Javascript no jQuery Please!

Javascript Solutions


Solution 1 - Javascript

You'll probably want to try textContent instead of innerHTML.

Given innerHTML will return DOM content as a String and not exclusively the "text" in the div. It's fine if you know that your div contains only text but not suitable if every use case. For those cases, you'll probably have to use textContent instead of innerHTML

For example, considering the following markup:

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

You'll get the following result:

var node = document.getElementById('test'),

htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."

textContent = node.textContent;
// textContent = "Some sample text."

See MDN for more details:

Solution 2 - Javascript

Because textContent is not supported in IE8 and older, here is a workaround:

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText does work in IE.

Solution 3 - Javascript

You can use innerHTML(then parse text from HTML) or use innerText.

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTML and innerText is supported by all browser(except FireFox < 44) including IE6.

Solution 4 - Javascript

Actually you dont need to call document.getElementById() function to get access to your div.

You can use this object directly by id:

text = test.textContent || test.innerText;
alert(text);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionagurchandView Question on Stackoverflow
Solution 1 - JavascriptdharView Answer on Stackoverflow
Solution 2 - JavascriptoabarcaView Answer on Stackoverflow
Solution 3 - JavascriptAbdusView Answer on Stackoverflow
Solution 4 - JavascriptNick WyntherView Answer on Stackoverflow