Javascript: How to setValue to HTMLDivElement?

Question

My HTML page code looks like this-

<div id="test-inputEl" role="textbox" class="test-field" data-errorqtip="">10</div>

To access this value 10 I am using below code-

var divObject = parent.document.getElementById('test-inputEl');
alert(divObject);
var testField = divObject.getElementsByClassName("test-field");
alert(testField);

For the first alert box I'm getting-

[object HTMLDivElement]

and for the second one I'm getting-

[object HTMLCollection]

But I can't access the value. I have tried like this-

var objValue = divObject.getElementsByClassName("x-form-display-field")[0].innerHTML;

But not Working. Is there any way to get this value or set this value using javascript. Because I'm not much familiar with jquery.

...and what is parent? And why you use document.getEl.... if you use parent? — Bhojendra Rauniyar, Jul 27 '15 at 06:51

Tushar · Accepted Answer · 2015-09-01T08:42:11.130

2

Use innerHTML property to get the value 10 from div.

var divObject = document.getElementById('test-inputEl').innerHTML;
document.write(divObject);

<div id="test-inputEl" role="textbox" class="test-field" data-errorqtip="">10</div>

edited Sep 01 '15 at 08:42

answered Jul 27 '15 at 06:48

Tushar

85,780
21
159
179

Do you think ` parent.document.getElementById...` would work? – Bhojendra Rauniyar Jul 27 '15 at 06:52

score 1 · Answer 2 · edited May 23 '17 at 12:29

When you use getElementById you retrieve the HtmlElement you want, but when you use getElementsByClassName your result is a collection of HTML element, it's NOT an array!!

to get the first item, use myCollection.item(0)

var objValue = divObject.getElementsByClassName("x-form-display-field").item(0).innerHTML;

https://developer.mozilla.org/it/docs/Web/API/HTMLCollection

How to correctly iterate through getElementsByClassName

Javascript: How to setValue to HTMLDivElement?

2 Answers2