Cross-browser innerText for setting values - javascript

Let's say I have the following code:
<html>
<head></head>
<body>
<div id="d">some text</div>
<script type="text/javascript">
var d = document.getElementByid('d');
var innerText = d.innerText || d.textContent;
innerText = 'new text';
</script>
</body>
</html>
And I want to change text value for the div tag with id='d'. Unfortunately the block code above doesn't work and the text content doesn't change.
It works if do the following recipe:
if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';
But I dont like the recipe above because it's not compact.
Have you any suggestions why the first approach doesn't work?

Instead of multiple assignments, you can grab the property and use that
var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';

The first approach doesn't work because all it does is set the variable to the new value, it doesn't write the value to the element. The line
var innerText = d.innerText || d.textContent;
...sets the variable innerText to the value of the text property it finds, it's not a reference to the actual property itself.
You'll have to do the branch, e.g.:
var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d) {
d.innerText = msg;
}
else {
d.textContent = msg;
}
That feature-detects whether the browser uses innerText or textContent by looking for the existence of the property on the element (that's what the in operator does, check if an object has a property with the given name, even if that property is blank, null, undefined, etc.).
You can even write yourself a function for it:
var setText = (function() {
function setTextInnerText(element, msg) {
element.innerText = msg;
}
function setTextTextContent(element, msg) {
element.textContent = msg;
}
return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
})();
That does the feature-detection once, and returns a function any half-decent engine will inline for you.
Or alternately, if you want HTML markup in the message to be handled as markup (rather than literal text), you can just use innerHTML (which is consistent across browsers). But again, if you use innerHTML, markup will be processed which may not be what you want.
I find it useful to use a good JavaScript library to deal with these browser differences (and to provide a ton of useful further functionality), such as jQuery, YUI, Closure, or any of several others. Obviously there's nothing you can do with a library you can't do without one, it's just a matter of standing on the shoulders of people who've done a huge amount of work already. :-)
In this case, for instance, using jQuery the above would be:
$("#d").text("new text");
That's it.

d.appendChild(document.createTextNode("new text");

you can use textContent only & it will work in major browsers... (FF, Safari & Chrome)
var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;

Related

String Comparison in Switch doesn't work in IE and Edge [duplicate]

What is the difference between textContent and innerText in JavaScript?
Can I use textContent as follows:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
The key differences between innerText and textContent are outlined very well in Kelly Norton's blogpost: innerText vs. textContent. Below you can find a summary:
innerText was non-standard, textContent was standardized earlier.
innerText returns the visible text contained in a node, while textContent returns the full text. For example, on the following HTML <span>Hello <span style="display: none;">World</span></span>, innerText will return 'Hello', while textContent will return 'Hello World'. For a more complete list of differences, see the table at http://perfectionkills.com/the-poor-misunderstood-innerText/ (further reading at 'innerText' works in IE, but not in Firefox).
As a result, innerText is much more performance-heavy: it requires layout information to return the result.
innerText is defined only for HTMLElement objects, while textContent is defined for all Node objects.
Be sure to also have a look at the informative comments below this answer.
textContent was unavailable in IE8-, and a bare-metal polyfill would have looked like a recursive function using nodeValue on all childNodes of the specified node:
function textContent(rootNode) {
if ('textContent' in document.createTextNode(''))
return rootNode.textContent;
var childNodes = rootNode.childNodes,
len = childNodes.length,
result = '';
for (var i = 0; i < len; i++) {
if (childNodes[i].nodeType === 3)
result += childNodes[i].nodeValue;
else if (childNodes[i].nodeType === 1)
result += textContent(childNodes[i]);
}
return result;
}
textContent is the only one available for text nodes:
var text = document.createTextNode('text');
console.log(text.innerText); // undefined
console.log(text.textContent); // text
In element nodes, innerText evaluates <br> elements, while textContent evaluates control characters:
var span = document.querySelector('span');
span.innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8";
console.log(span.innerText); // breaks in first half
console.log(span.textContent); // breaks in second half
<span></span>
span.innerText gives:
1
2
3
4 5 6 7 8
span.textContent gives:
1234
5
6
7
8
Strings with control characters (e. g. line feeds) are not available with textContent, if the content was set with innerText. The other way (set control characters with textContent), all characters are returned both with innerText and textContent:
var div = document.createElement('div');
div.innerText = "x\ny";
console.log(div.textContent); // xy
For those who googled this question and arrived here. I feel the most clear answer to this question is in MDN document: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent.
You can forgot all the points that may confuse you but remember 2 things:
When you are trying to alter the text, textContent is usually the property you are looking for.
When you are trying to grab text from some element, innerText approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard. And textContent gives you everything, visible or hidden, including <script> and <style> elements.
Both innerText & textContent are standardized as of 2016. All Node objects (including pure text nodes) have textContent, but only HTMLElement objects have innerText.
While textContent works with most browsers, it does not work on IE8 or earlier. Use this polyfill for it to work on IE8 only. This polyfill will not work with IE7 or earlier.
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
The Object.defineProperty method is availabe in IE9 or up, however it is available in IE8 for DOM objects only.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
textContent is supported by most browsers. It is not supported by ie8 or earlier, but a polyfill can be used for this
The textContent property sets or returns the textual content of the specified node, and all its descendants.
See http://www.w3schools.com/jsref/prop_node_textcontent.asp
Aside from all the differences that were named in the other answers, here is another one which I discovered only recently:
Even though the innerText property is said to've been standardised since 2016, it exhibits differences between browsers: Mozilla ignores U+200E and U+200F characters ("lrm" and "rlm") in innerText, while Chrome does not.
console.log(document.getElementById('test').textContent.length);
console.log(document.getElementById('test').innerText.length);
<div id="test">[‎]</div>
Firefox reports 3 and 2, Chrome reports 3 and 3.
Not sure yet if this is a bug (and if so, in which browser) or just one of those quirky incompatibilities which we have to live with.
textContent returns full text and does not care about visibility, while innerText does.
<p id="source">
<style>#source { color: red; }</style>
Text with breaking<br>point.
<span style="display:none">HIDDEN TEXT</span>
</p>
Output of textContent:
#source { color: red; } Text with breakingpoint. HIDDEN TEXT
Output of innerText ( note how innerText is aware of tags like <br>, and ignores hidden element ):
Text with breaking point.
Another useful behavior of innerText compared to textContent is that newline characters and multiple spaces next to each other will be displayed as one space only, which can be easier to compare a string.
But depending on what you want, firstChild.nodeValue may be enough.
document.querySelector('h1').innerText/innerHTML/textContent
.querySelector('h1').innerText - gives us text inside. It sensitive to what is currently being displayed or staff that's being hidden is ignored.
.querySelector('h1').textContent - it's like innerText but it does not care about what is being displayed or what's actually showing to user. It will show all.
.querySelector('h1').innerHTML = <i>sdsd</i> Will work* - retrieves full contents, including the tag names.
innerHTML will execute even the HTML tags which might be dangerous causing any kind of client-side injection attack like DOM based XSS.
Here is the code snippet:
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside gets executed as h1 tag HTML is evaluated</h1>"); //Source
var divElement = document.createElement("div");
divElement.innerHTML = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
If you use .textContent, it will not evaluate the HTML tags and print it as String.
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside will not get executed as HTML</h1>"); //Source
var divElement = document.createElement("div");
divElement.textContent = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
Reference: https://www.scip.ch/en/?labs.20171214

How to fill this textbox? [duplicate]

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.
<div id="panel">
<div id="field_name">TEXT GOES HERE</div>
</div>
Here's what the function will look like:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById('field_name');
//Make replacement here
}
You can simply use:
fieldNameElement.innerHTML = "My new text!";
Updated for everyone reading this in 2013 and later:
This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.
To replace text inside a div element, use Node.textContent, which is provided in all current browsers.
fieldNameElement.textContent = "New text";
function showPanel(fieldName) {
var fieldNameElement = document.getElementById("field_name");
while(fieldNameElement.childNodes.length >= 1) {
fieldNameElement.removeChild(fieldNameElement.firstChild);
}
fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}
The advantages of doing it this way:
It only uses the DOM, so the technique is portable to other languages, and doesn't rely on the non-standard innerHTML
fieldName might contain HTML, which could be an attempted XSS attack. If we know it's just text, we should be creating a text node, instead of having the browser parse it for HTML
If I were going to use a javascript library, I'd use jQuery, and do this:
$("div#field_name").text(fieldName);
Note that #AnthonyWJones' comment is correct: "field_name" isn't a particularly descriptive id or variable name.
I would use Prototype's update method which supports plain text, an HTML snippet or any JavaScript object that defines a toString method.
$("field_name").update("New text");
Element.update documentation
$('field_name').innerHTML = 'Your text.';
One of the nifty features of Prototype is that $('field_name') does the same thing as document.getElementById('field_name'). Use it! :-)
John Topley's answer using Prototype's update function is another good solution.
The quick answer is to use innerHTML (or prototype's update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR
in IE:-
document.getElementById("field_name").innerText = newText;
in FF:-
document.getElementById("field_name").textContent = newText;
(Actually of FF have the following present in by code)
HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })
HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })
Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.
If you really want us to just continue where you left off, you could do:
if (fieldNameElement)
fieldNameElement.innerHTML = 'some HTML';
nodeValue is also a standard DOM property you can use:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
if(fieldNameElement.firstChild)
fieldNameElement.firstChild.nodeValue = "New Text";
}
el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
If you're inclined to start using a lot of JavaScript on your site, jQuery makes playing with the DOM extremely simple.
http://docs.jquery.com/Manipulation
Makes it as simple as:
$("#field-name").text("Some new text.");
Use innerText if you can't assume structure
- Use Text#data to update existing text
Performance Test
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
fieldNameElement.removeChild(fieldNameElement.firstChild);
var newText = document.createTextNode("New Text");
fieldNameElement.appendChild(newText);
}
Here's an easy jQuery way:
var el = $('#yourid .yourclass');
el.html(el.html().replace(/Old Text/ig, "New Text"));
In HTML put this
<div id="field_name">TEXT GOES HERE</div>
In Javascript put this
var fieldNameElement = document.getElementById('field_name');
if (fieldNameElement)
{fieldNameElement.innerHTML = 'some HTML';}

How to insert text in an HTML document using JavaScript?

I want to replace a span element with the id "randMsg" with the string "saying". Here is what I have right now:
document.getElementById('randMsg').write(saying);
Any ideas? I’m a JavaScript noob, what am I doing wrong?
You can use the textContent property to update the text inside the element:
document.getElementById("randMsg").textContent = "Replaced Content";
http://jsfiddle.net/RaGng/
Or if you need it to work in IE8 and below, you can detect support for textContent, and if it is not supported, you can use the non-standard innerText instead:
var el = document.getElementById("randMsg"),
msg = "Replaced Content";
("textContent" in el) ? el.textContent = msg : el.innerText = msg;
http://jsfiddle.net/RaGng/4/
The following W3C DOM code works in all mainstream browsers, including IE8 and older.
var node = document.getElementById('randMsg');
var textToUse = 'Hello, World!';
// Remove all the children of the node.
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
// Now add the text.
node.appendChild(document.createTextNode(textToUse));
Working JsFiddle here.
You can also use innerText, however, not supported in Firefox:
node.innerText = textToUse;
Or, you can use textContent, however, not supported by IE versions 8 and older:
node.textContent = textToUse;
Quirksmode has very well maintained browser compatibility tables for all of the above.
Working jsFiddle Demo
You must set the innerHTML property of the element. Consider the following markup:
<span id="randMsg"></span>
And in your JS code:
var saying = 'Say Hello World';
document.getElementById('randMsg').innerHTML = saying;
And your result would be:
<span id="randMsg">Say Hello World</span>
Note
Don't forget to add this script after your element (or wait for DOM ready):
<body>
<span id="randMsg"></span>
<script>
var saying = 'Say Hello World';
document.getElementById('randMsg').innerHTML = saying;
</script>
</body>

javascript getElementById and convert it to String

is there a way to convert a javascript HTML object to a string?
i.e.
var someElement = document.getElementById("id");
var someElementToString = someElement.toString();
thanks a lot in advance
If you want a string representation of the entire tag then you can use outerHTML for browsers that support it:
var someElementToString = someElement.outerHTML;
For other browsers, apparently you can use XMLSerializer:
var someElement = document.getElementById("id");
var someElementToString;
if (someElement.outerHTML)
someElementToString = someElement.outerHTML;
else if (XMLSerializer)
someElementToString = new XMLSerializer().serializeToString(someElement);
You can always wrap a clone of an element in an 'offscreen', empty container.
The container's innerHTML is the 'outerHTML' of the clone- and the original.
Pass true as a second parameter to get the element's descendents as well.
document.getHTML=function(who,deep){
if(!who || !who.tagName) return '';
var txt, el= document.createElement("div");
el.appendChild(who.cloneNode(deep));
txt= el.innerHTML;
el= null;
return txt;
}
someElement.innerHTML
As Darin Dimitrov said you can use element.innerHTML to display the HTML element childnodes HTML. If you are under IE you can use the outerHTML propoerty that is the element plus its descendants nodes HTML
You just have to create one variable then store value into it. As in one my project I have done the same thing and it works perfectly.
var message = "";
message = document.getElementById('messageId').value;
test it.. It will definitely work.

Why can't I set value to display in a div?

So I'm new to JavaScript and I'm trying to figure out why doesn't this work:
My function has this line:
document.getElementById("displayResult").value = ("test");
and this is my div:
<div id="displayResult"></div>
div's don't have a value property. You want to set the .innerText property.
And by all means, have fun testing things yourself, but you'll find it a lot easier if you use a framework to do these things (like jQuery)
You will want to use - .innerHTML no?
document.getElementById("displayResult").innerHTML = "<b>test</b>";
.value is only a valid attribute on form fields. You likely want to use the following code:
document.getElementById("displayResult").innerHTML = "test";
you have to test if innerHTML is supported by your brwser. As it is not the DOM Standard.
You can write it like
var oDiv = document.getElementById("displayResult")
if(typeof oDiv.innerHTML != undefined) {
oDiv .innerHTML = message;
} else {
oDiv .appendChild(document.createTextNode(message));
}

Categories