Make DIV action as INPUT field

Question

I am currently using a bunch of text input fields and I want to change it to DIV, but most of my JS functions use document.getElementById("inputField1").value when 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!"/> 

This will return only Hello World! if I have to display the value in alert

How do I get the meaning of text between them if I were using a div?

For example, <div id="inField001">Hello World</div>

Thanks!

Answer 1

In this 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 kind of html, that’s enough too.

.innerHTML

You can also use document.getElementById('inField001').textContent) to capture only text nodes from an element that ignores any element wrappers.

But textContent support is not as good as innerHTML. See doc for information and support.

Another way is to use 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 

By the way, this method is best suited for jQuery.

Answer 4

Text content only:

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

For a more detailed version see here.

Answer 5

or simply

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