Make a DIV act as an INPUT field

Question

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!

Answer 1

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()

Answer 2

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

Answer 3

Use the innerHTML property.

document.getElementById("inField001").innerHTML

BTW this kind of thing is way better to do with jQuery.

Answer 4

For just text content:

var value = document.getElementById('inputField1').textContent;

For the more verbose version, see here.

Answer 5

or just do

x = document.getElementById("inField001");
alert(x);