Difference between ".innerHTML" and ".value" in JS - javascript

I am confused on what is the difference between .innerHTML and .value in JavaScript. Here is my code:
<body>
Input string: <input type="text" id="input" />
....
</body>
When I use this code I cannot get the content of input string:
var str=document.getElementById("input").innerHTML;
While I use the following code, it works:
var str=document.getElementById("input").value;
Any one knows what is the difference between them?


value refers to the value of an input element (or textearea)
<input value="hello world">
value would be "hello world" (or any value typed inside)
innerHTML refers to the contents inside an HTML element.
<div>
<span class="hello">
All tags and their children are include in innerHTML.
</span>
All this is part of innerHTML.
</div>
innerHTML of the div tag would be the string:
'<span class="hello">
All tags and their children are include in innerHTML.
</span>
All this is part of innerHTML.'


The .innerHTML property refers to the literal HTML markup that is, once assigned, interpreted and incorporated into the DOM (Document Object Model) for the current document. On the other hand, the .value property simply refers to the content of typically an HTML input control, such as a textbox. Not every HTML element supports the input property, whereas most if not all support the innerHTML property.


.value gives you the currently-set value of a form element (input, select, textarea), whereas .innerHTML builds an HTML string based on the DOM nodes the element contains.


.innerHTML is use to insert element into the DOM, ,value is whatever is placed as an output display.

Related

HTML & Javascript change content inside angle brackets ( < > )

Just wanted to know if it is possible to change with pure Javascript the content between the angle brackets in a HTML tag.
By this I mean all the content, not only the tag name, not only the id, not only the class and all the different attributes but everything inside, even non standart HTML code.
One small example:
Before
<div id="myID" class="myCLASS" whaterver-content ></div>
After Javascript DOM function
<div id="myID" class="myCLASS" other-content ></div>
I know tag name, id and class can be modified with DOM Element Object functions in JS. Is there any nice function that does the same for data not inside quotes and not before an attribute?
Thanks for your answers.
EDIT: I just saw this Set attribute without value by asking the question on another way. But is the result the same? Or will there be ="" after the attribute?

I do not like the accepted answer. You should not be manipulating HTML as string. It is not safe and performance is usually really bad.
Imagine that whaterver-content is actual text somewhere inside that div, for example as user input. It will get replaced when it should not be.
Please use DOM manipulation directly:
var element = document.getElementById('myID');
element.removeAttribute("whaterver-content");
element.setAttribute("other-content", "");

How about using replace on the element's outerHTML attribute?
function change() {
document.getElementById('myID').outerHTML =
document.getElementById('myID').outerHTML.replace('whaterver-content','other-content');
console.info(document.getElementById('myID').outerHTML);
}
<div id="myID" class="myCLASS" whaterver-content ></div>
<input type='button' onclick='change();' value='change' />

Can not copy data of HTML tags to JavaScript

For some reasons I am trying to change functionality of submit button. I am facing problem in copying data from HTML tags to JS. The alert generated by following code prints "Undefined" not the data inside tag.
<html>
<body>
<input class="inputtext" id="email" name="email" type="text"></div>
<input value="Submit" name="v4l" id="login" class="inputsubmit" type="button" onclick="myFunction();return false">
<script>
function myFunction() {
var TestVar =document.getElementsByClassName('login').value;
alert(TestVar);
}
</script>
</body>
</html>
I know it can be done by form but I need it this way.

try
var TestVar = document.getElementById('email').value
alert(TestVar);
this will get value of text field

getElementsByClassName
^
See that s? Elements is plural. getElementsByClassName returns a NodeList (which is like an Array).
You have to either pick an index from it (foo[0]) or loop over it to get the values.
That said, you don't actually have any elements that are a member of the login class, so it is going to return a Node List of zero length.
You do have an element with id="login", so maybe you should use getElementById instead.
There doesn't seem much point in reading the value from an element that you've hard coded the value for. You might actually want to be using document.getElementById('email')

Robot Framework : Error WebDriverException on executing JavaScript

I enter the text into test area and save then I click on Edit button now i have to remove the text from textbox.
I am getting error when i execute the below command for clearing textbox.
`Execute Javascript window.document.getElementByName('resolution').value='';`
HTML:
<span class="textarea-text edit" sfuuid="1832">
<textarea class="input-xlarge wide tleft" name="resolution" cols="" rows="">test</textarea>
<p class="help-block"></p>
</span>

Here you have a textarea tag not a input tag with value attribute. You can clearly see that your textarea. Doesn't have a value attribute. The text "test" is the innerHTML of the element so try setting the innerHTML
LIKE
document.getElementById("").innerHTML=' '

Names are not necessarily unique. Thus, there is no getElementByName method. It is getElementsByName (note the plurality). If you want to just try your operation on the first element found in the DOM with that name, change your code to:
Execute Javascript window.document.getElementsByName('resolution')[0].value='';
Note that it is not necessary to use JavaScript to accomplish this either. Instead, you could do:
Input Text name=resolution ${EMPTY}

What is innerHTML on input elements?

I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve

First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.

Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.

do you mean something like this:
$('.activeElement').val('Some text');

<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value

Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>

Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent

var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types

show html output in textarea instead of HTML code

If I have a textarea including some HTML code, how can I write a JavaScript function to show the HTML output instead of HTML code itself, for example:
<textarea id="mytextarea">
<table border=1><tr><td>cellone</td>td>celltwo</td></tr></table
</textarea>
<input type=button onclick="HTMLoutput();"/>
<script>
HTMLoutput()
{
//Code to show html output instead of html code in textarea
}
</script>
How can I do this? What is the suggested code to write inside the HTMLoutput()?

So to convert the the html code to a formated html you need to do:
$('resultDiv').append($('<div/>').html($('.txtArea').val()+"<br>");
here's an example that use div with contentEditable set to true.

It sounds like you're asking how to take some HTML and display its rendered result in your document.
That's exactly what the innerHTML property does.
Simply pick a DOM element to display the result in, and set its innerHTML to the HTML to display.

Categories

Resources