Получить элемент по идентификатору и изменить его значение родственного элемента

HTML

<table>
    <tr id="1">
        <td id="a">aa</td>
        <td>bb</td>
    </tr>
</table>

JavaScript

document.getElementById("1").children[1].innerHTML="newB"  // it works as expected.     
document.getElementById("a").nextSibling.innerHTML="newB" // it does not work.

Как я могу изменить значение td id="a" sibling, используя второй подход?


javascript siblings
person QQ Lam    schedule 16.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Используйте 1_

document.getElementById("a").nextElementSibling.innerHTML = "newB";

nextSibling выберет пустой textNode, как вы можете видеть в следующей демонстрации.

console.log(document.getElementById("a").nextSibling);
<table>
  <tr id="1">
    <td id="a">aa</td>
    <td>bb</td>
  </tr>
</table>

Вы можете видеть, что nextSibling будет работать как положено, когда между элементами нет места. Таким образом, он не выберет пустой textNode.

document.getElementById("a").nextSibling.innerHTML = "newB";
<table>
    <tr id="1">
        <td id="a">aa</td><td>bb</td> <!-- No space, it works! -->
    </tr>
</table>

person Tushar    schedule 16.09.2015
comment
Я не знаю, где нажать "принято". Но ваш код работает. - person QQ Lam; 16.09.2015

arrow_upward
0
arrow_downward

Это потому, что следующим братом td может быть текстовый узел, вам нужен следующий брат или сестра элемента.

Вы можете использовать свойство nextElementSibling.

document.getElementById("a").nextElementSibling.innerHTML = "newB";
<table>
  <tr id="1">
    <td id="a">aa</td>
    <td>bb</td>
  </tr>
</table>

Примечание: поддерживается в IE 9+.

person Arun P Johny    schedule 16.09.2015
comment
@SpencerWieczorek да .. должно быть просто nextElementSibling.innerHTML - person Arun P Johny; 16.09.2015