How to access nested html-child elements in javascript

Question

I'm using a html-form with nested div-elements with this structure:

<form id="form">
    <div id="parentproperties">
        <legend class="itemName">People</legend>
        <br>
        <div id="properties1">
            <legend class="itemName">Name</legend>
            <label class="valueId">JaneDoe</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">5646543</input>
        </div>
        <div id="properties2">
            <legend class="itemName">Address</legend>
            <label class"valueId">MysteriousStreet</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">1234</input>
        </div>
        <div id="properties3">
            <legend class="itemName">Country</legend>
            <label class"valueId">SomeCountry</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">7899542</input>
                    <div id="properties4">
                    <legend class="itemName"></legend>
                    <br>
                    </div>
        </div>
    </div>
</form>

Now I need to access the field with the Id 'valueID' for every 'div' to change a specific value. I've tried several loops but they do not not work properly... Later I've tried to get a particular element directly this way:

document.getElementById("properties").childNodes[0].innerHTML;

...but I only get the first valueId with value 'JaneDoe'. Thanks in advance for any ideas!

ids are supposed to be unique within the document. Use class or data-* attribute to group elements. — Teemu
– Teemu, Commented Aug 11, 2017 at 13:36
Use a class instead of an id. id attributes should be unique, they're like addresses. — Difster
– Difster, Commented Aug 11, 2017 at 13:38

Brett DeWoody · Accepted Answer · 2017-08-11 13:49:05Z

As mentioned in the comments, the current HTML structure needs some attention:

Don't use a unique ID more than once. Use classes, data- attributes, or unique IDs.
Input elements do not have closing tags, they're self-closing <input />.

Now, to select the elements you want, you have several options.

Give each element a unique ID and select it with

document.getElementById('input-1').value('new value');

Or loop through the input elements with something like:
```
document.querySelectorAll('.inputId'))
```
which will return a NodeList of all the elements with a class of inputId

document.getElementById('input-1').value = "New Value"

<form id="form">
  <div>
    <legend id="itemName">People</legend>
    <br>
    <div class="properties">
      <legend class="itemName">Name</legend>
      <label class="valueId">JaneDoe</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-1" value="5646543" />
    </div>
    <div class="properties">
      <legend class="itemName">Address</legend>
      <label class="valueId">MysteriousStreet</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-2" value="1234" />
    </div>
    <div class="properties">
      <legend class="itemName">Country</legend>
      <label class="valueId">SomeCountry</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-2" value="7899542" />
    </div>
    <div id="properties">
      <legend id="itemName"></legend>
      <br>
    </div>
  </div>
</form>

P.S. · Accepted Answer · 2017-08-11 13:40:24Z

0

childNodes[0] selects the first node of all child nodes, so you can use childNodes[1], childNodes[2] and so on. As Teemu said, ids should be unique, in your case it looks like a good point to use classes.

answered Aug 11, 2017 at 13:40

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Comments

Vaix · Accepted Answer · 2017-08-11 13:40:35Z

0

as @Teemu says in comment ids should be unique within the document, instead you could give them some class="a"

then you could get all elements by class document.getElementsByClassName("a")

answered Aug 11, 2017 at 13:40

Vaix

492 silver badges9 bronze badges

Comments

FRED WILLIAMS ASSAMOI · Accepted Answer · 2017-08-11 13:43:00Z

0

It's simple to use class attributes in the place of id attributes.

document.getElementsByClassName("properties")[0].childNotes[0].innerHTML;

answered Aug 11, 2017 at 13:43

FRED WILLIAMS ASSAMOI

966 bronze badges

Comments

asmmahmud · Accepted Answer · 2017-08-11 14:00:29Z

0

Use children instead of childNodes :

document.getElementById("properties1").children[0].innerHTML =

Also you should use unique id string for element id.

childNodes return a NodeList object which also includes textNodes and commentNodes etc. But, children method will only give you HTMLCollection object.

edited Aug 11, 2017 at 14:00

answered Aug 11, 2017 at 13:40

asmmahmud

5,0642 gold badges42 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to access nested html-child elements in javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related