Develop Reference

Use innerText to retrieve text from hidden HTML elements

I need to get the text from an html element which is hidden with css. I know that per the specs innerText will abide the css rules. But the alternative of using textContent ignores line break and tabs which I need to keep in the string.
Is there any way around this?
For simplicity please see the following example:
const inntxt = document.querySelector('.expandable').innerText
console.log(inntxt) // Here we don't get the hidden div's text.
const txtct = document.querySelector('.expandable').textContent
console.log(txtct) // Here the result removes the line break.
.hidden{
display: none;
}
<div class='expandable'>
<span class='visib'>
Red balloon
</span>
<br>
<span class='hidden'>
Yellow badge<br>Green ribbon
</span>
</div>
I guess one way around it would be to replace the <br> with my own char like # by appending it instead of the <br>, but there must be a better way no?
UPDATE
To be more clear the end result should be:
For example if you would console.log() the string in node, then the string from our innerText or textContent should be:
'Red balloon\nYellow Badge\nGreen ribbon'

It is very unintuitive that textContent doesn't retrieve <br> new lines.
I suggest using a dummy element in Javascript using innerHTML and replacing all <br> with \n<br>.
Take a look at this code, I think it solves your issue:
const expandable = document.querySelector('.expandable')
const auxEl = document.createElement('div')
auxEl.innerHTML = expandable.innerHTML.replace(/(\<br\>)/, '\n$1')
const textContent = auxEl.textContent
console.log({ textContent })
/* Yields
{
"textContent": "\n \n Red balloon\n \n \n Yellow badge\nGreen ribbon\n \n"
}
*/
.hidden {
display: none;
}
<div class='expandable'>
<div class='visib'>
Red balloon
</div>
<div class='hidden'>
Yellow badge<br>Green ribbon
</div>
</div>

Not sure about what you're trying to achieve here, but what you might want to do is change innerText to innerHTML and then the line breaks are preserved.
Unlike innerText, though, innerHTML lets you work with HTML rich
text and doesn't automatically encode and decode text. In other words,
innerText retrieves and sets the content of the tag as plain text,
whereas innerHTML retrieves and sets the content in HTML format.
Quoted from https://stackoverflow.com/a/19030857/4073621.

Kindly use the following script to get innerText
const inntxt = document.getElementsByClassName('expandable')[0].innerText;
console.log(inntxt);

Change the error message in a SPAN using JavaScript/jQuery

I want to change the message in a <span> using JavaScript/jQuery.
<span id="access-code-error" class="rsvp required-fields"> </span>
I am using the following code to replace the text which will be added to this <span>:
$("span:contains('I need <br>this text to be replaced')").text( "hello<br> How r u" );
But this isn't working. What do I need to do differently?

You can use the jQuery text() method like below:
$("#access-code-error").text("Your message");

Working fiddle:
https://jsfiddle.net/6wcpLpbw/
Using a html tag inside a :contains will not work properly.
.text() should be used only with plain text not with html tags inside it.
You should use .html() instead of .text().
Try something like this:
$("span:contains('I need this text to be replaced')").html("hello<br> How r u");
Note: ID should be used only once in a page.

To change the error message of your access-code-error span, you can do the following:
JavaScript:
var errormsg = document.getElementById("access-code-error");
errormsg.innerHTML = "hello<br> How r u";
jQuery:
1) You can use the html() method as shown:
$("#access-code-error").html("hello<br/> How r u");
2) You can also use the text() method in a similar way:
$("#access-code-error").text("hello<\br/> How r u");

This first html('') will remove current text from the span and the other one will add the text you want.
:)
$('#access-code-error').html('').html('hello<br> How r u');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="access-code-error" class="rsvp required-fields">This need to be Replaced </span>

Since you have provided the id of the span, you can use that as shown:
$("#access-code-error").text("Your message");

How to insert text and html within a tag where the text appears first and html appears second

I have been looking on the internet, but I failed to find the correct solution.
What I have here erases the text content with the html, and I need both there.
On the markup I need something like this:
<h1 class="stock-count">54<span class="stock-count-info">In Stock</span></h1>
But I keep getting something this (without 54):
<h1 class="stock-count"><span class="stock-count-info">In Stock</span></h1>
This is the jQuery code I have tried:
$(".stock-count").text(count);
$(".stock-count").html("<span class='stock-count-info'></span>");
$(".stock-count-info").text("In Stock");
Has anyone got any suggestions?
PS. The span tag HAS to be within the h1 tag.

Try this : You can add count and stock-count-info span directly to html of stock-count span in a single call.
$(".stock-count").html(count+"<span class='stock-count-info'>In Stock</span>");

You can use .append():
$(".stock-count").append("<span class='stock-count-info'>In Stock</span>");

use prepend to insert the element before
$(".stock-count").html("<span class='stock-count-info'></span>").prepend(count);

Make a DIV act as an INPUT field

I am currently using a bunch of input textfields and I want to change it to a DIV, but most of my JS functions use document.getElementById("inputField1").value whenever the value of the input field is set like this:
<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>
That would return just Hello World! if I were to display the value in an alert
How would I get the value of the text in between if I were to use DIVs?
For example <div id="inField001">Hello World</div>
Thanks!

In that case you can use:
document.getElementById('inField001').innerHTML
Or:
document.getElementById('inField001').innerText
Or:
document.getElementById('inField001').textContent
Also (if you want to use jQuery):
$('#inField001').text()

You would just do
var value = document.getElementById('inField001').innerHTML);
But if your DIV has some html this will grab that too.
.innerHTML
You can also use document.getElementById('inField001').textContent) to grab just the text nodes from the element ignoring any element wrappers.
But support for textContent is not as good as innerHTML.
See doc for info and support.
Another way is using innerText. alert(document.getElementById('inField001').innerText); but not supported in FF.
See Doc for support.
Fiddle

Use the innerHTML property.
document.getElementById("inField001").innerHTML
BTW this kind of thing is way better to do with jQuery.

For just text content:
var value = document.getElementById('inputField1').textContent;
For the more verbose version, see here.

or just do
x = document.getElementById("inField001");
alert(x);

Why JavaScript converts my < into >

JavaScript converts my < into >. I want to alert it but my message is with encoded marks like ##&*()}{>?>? - how to display it normally but prevent from executing as HTML code?
<span id="ID" onClick="alertIt(this.id);">
<p>Some string with special chars: ~!##&*()}{>?>?>|{">##$#^#$</p>
<p>Why when clicked it gives something like this:</p>
<p>'<br>
Some string with special chars: ~!##&*()}{>?>?>|... and so on
<br>'</p>
</span>
<script type="text/javascript">
function alertIt(ID)
{
var ID = ID;
var content = document.getElementById(ID).innerHTML;
alert(content);
}
</script>

Use innerText instead of innerHTML. http://jsfiddle.net/WVf95/

Your problem is that you use the wrong approach to get the text to display with alert().
Some characters are illegal in HTML text (they are used for HTML tags and entities). innerHTML will make sure that text is properly escaped (i.e. you can see tags and escaped text).
If you want to see tag and text in alert(), there is no solution.
If you want only the text, then you will have to extract it yourself. There is no built-in support for that. It's also not really trivial to implement. I suggest to include jQuery in your page; then you can get the text with:
function alertIt(ID) {
alert($(ID).text());
}

Using textContent instaed of innerHTML or innerText is a solution.