Get the value of an element child in javascript

Question

I'm trying to get the value of an element child. Here is the element :

<li id="1" style="display:normal">
    <h2 id="label_lg">Temp Set (º<span class="degsign">C</span>)</h2>
    <p id="ihi" style="color:teal;font-size:3vw;">--</p>
</li>

I would like to get the value of <p></p>, if possible in javascript. I've tried to use

document.getElementById(1).childNodes[1].nodeValue;

and

var o = document.getElementById(i).children
o[1].nodeValue

Nothing worked, the alert always returns null.

A paragraph doesn't have a value, it has innerHTML or innerText or even textContent — adeneo
– adeneo, Commented Jan 12, 2016 at 13:57
I suggest you do not use numeric IDs. Although valid in some versions of HTML, I do not recommend using them at all. — mplungjan
– mplungjan, Commented Jan 12, 2016 at 14:00
What is style="display:normal" supposed to be? normal is not a valid CSS property for display. — Sebastian Simon
– Sebastian Simon, Commented Jan 12, 2016 at 14:01

score 2 · Accepted Answer · 2016-01-12 13:59:03Z

2

Since you've specified jQuery:

$('#1 p').text();

As simple as that.

edited Jan 12, 2016 at 13:59

answered Jan 12, 2016 at 13:58

user1017882

Sign up to request clarification or add additional context in comments.

Comments

Rajesh Dixit · Accepted Answer · 2016-01-12 14:25:55Z

1

You can use following:

innerText || textContent

These will give you text of element. If you have nested elements like a small tag inside p, you will get text of all.

innerHTML

This will return HTML of the element. If you have nested elements, it will not return text, but a raw html of that element. But if element does not have a child, then output will be same.

(function() {
  var parent = document.getElementById('1');
  var _innerText = parent.innerText;
  var _innerHTML = parent.innerHTML;
  var _textContent = parent.textContent;

  console.log(_innerText, _innerHTML, _textContent)
})()

<li id="1" style="display:normal">
  <h2 id="label_lg">Temp Set (º<span class="degsign">C</span>)</h2>
  <p id="ihi" style="color:teal;font-size:3vw;">--</p>
</li>

edited Jan 12, 2016 at 14:25

answered Jan 12, 2016 at 14:01

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Comments

Shay Zambrovski · Accepted Answer · 2016-01-12 14:00:21Z

0

Try:

var pString = document.getElementById("ihi").value;

and to change the value:

pString.innerHTML = "Your string"

answered Jan 12, 2016 at 14:00

Shay Zambrovski

66410 silver badges24 bronze badges

1 Comment

15ee8f99-57ff-4f92-890c-b56153 Over a year ago

This is all kinds of wrong. document.getElementById("ihi").value is undefined because ihi, a p element, doesn't have a value property. document.getElementById("ihi").innerText would do the job, but it would return a string. You can set an innerHTML property on a string, but it's not going to have any effect on the UI. document.getElementById("ihi").innerText = "Your string" would work for that.

elreeda · Accepted Answer · 2016-01-12 14:00:32Z

0

with JS

alert(document.getElementById('ihi').innerHTML)

<li id="1" style="display:normal">
      <h2 id="label_lg">Temp Set (º<span class="degsign">C</span>)</h2>
      <p id="ihi" style="color:teal;font-size:3vw;">--</p>
 </li>

with JQUERY:

alert($('#ihi').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="1" style="display:normal">
      <h2 id="label_lg">Temp Set (º<span class="degsign">C</span>)</h2>
      <p id="ihi" style="color:teal;font-size:3vw;">--</p>
 </li>

answered Jan 12, 2016 at 14:00

elreeda

4,6072 gold badges22 silver badges45 bronze badges

Comments

Bryan · Accepted Answer · 2016-01-12 14:04:47Z

0

You can use the innerText property:

alert(document.getElementById(1).childNodes[1].innerText);
// Alerts "--"

In case you want to use jQuery:

alert($("1").child("#ihi").html())

answered Jan 12, 2016 at 14:04

Bryan

7731 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Get the value of an element child in javascript

5 Answers 5

Comments

innerText || textContent

innerHTML

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

innerText || textContent

innerHTML

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related