Setting Innerhtml VS. Setting Value with JavaScript

Setting innerHTML vs. setting value with Javascript

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.

Here is a link showing the use of ID.value:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml

Difference between innerText, innerHTML and value?

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.

When do I use .val() vs .innerHTML?

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

Reference links about innerHTML, innerText, val(), text(), html()

How to tell whether my element needs innerHTML or value

If you are trying to do it in a generic way you could make an instanceof check against the input element's interface class:

if( element instanceof HTMLInputElement ){
    element.value = "foo";
} else {
    element.innerHTML = "foo";
}

React.js: Set innerHTML vs dangerouslySetInnerHTML

Yes there is a difference!

The immediate effect of using innerHTML versus dangerouslySetInnerHTML is identical -- the DOM node will update with the injected HTML.

However, behind the scenes when you use dangerouslySetInnerHTML it lets React know that the HTML inside of that component is not something it cares about.

Because React uses a virtual DOM, when it goes to compare the diff against the actual DOM, it can straight up bypass checking the children of that node because it knows the HTML is coming from another source. So there's performance gains.

More importantly, if you simply use innerHTML, React has no way to know the DOM node has been modified. The next time the render function is called, React will overwrite the content that was manually injected with what it thinks the correct state of that DOM node should be.

Your solution to use componentDidUpdate to always ensure the content is in sync I believe would work but there might be a flash during each render.

Should I use .innerHTML or .value for textarea?

You access and update the value of a textarea element through the "value" property.

Try:

 var theValue = document.getElementById("editorHead").value;

Updating the <html> element doesn't make much sense.

JS DOM innerHTML Value not changing HTML

Use it like this:

var day1max = document.getElementById("todayMax");
var day1min = document.getElementById("todayMin");
var day1current = document.getElementById("todayCurrent");
var day1img = document.getElementById("todayIcon");
var day1title = document.getElementById("todayTitle");
var day1desc = document.getElementById("todayDesc");

day1max.innerHTML = today.max;
day1min.innerHTML = "today.min";
day1current.innerHTML = today.current;
day1img.setAttribute("src", today.icon);
day1title.innerHTML = today.title;
day1desc.innerHTML = today.description;

Setting Innerhtml VS. Setting Value with JavaScript