Установка innerHTML для nextSibling

Question

У меня есть следующий HTML:

<h3 onclick="replaceNextChild(this);">Some content...</h3>
<div>Div that I am interested in replacing</div>

У меня есть следующий JavaScript:

<script>
function replaceNextChild(element) {

   element.nextSibling.innerHTML = "I replaced the next element in the DOM";
}
</script>

Почему JavaScript не заменяет следующий элемент? Я также использую jQuery и не возражаю против решения jQuery.

Answer 1

Поскольку во многих браузерах nextSibling будет пустым текстовым узлом.

Используйте взамен nextElementSibling.

element.nextElementSibling.innerHTML = "I replaced the next element in the DOM";

Вам понадобитсясоздать функцию для браузеров, которые ее не поддерживают.

( element.nextElementSibling || nextElementSibling( element ) )
                           .innerHTML = "I replaced the next element in the DOM";

function nextElementSibling( el ) {
    if( el ) {
        while( (el = el.nextSibling) && el.nextSibling.nodeType !== 1 );
        return el;
    }
}

Answer 2

Я использую jQuery, поэтому любые решения, использующие методы из этой библиотеки, тоже будут полезны

Ну, это немного меняет: P

$(this).next().html('I replaced the next element in the DOM');

---

Потому что это текстовый узел.Установите вместо этого nodeValue или data, если вы хотите изменить текстовый узел, в противном случае, возможно, измените вашу функцию на ...

function replaceNextChild(element) {

   do {
       element = element.nextSibling;
   } while (element.nodeType != 1);

   element.innerHTML = "I replaced the next element in the DOM";
}

jsFiddle .

Но на самом деле ответ Патрика (используйте nextElementSibling намного лучше).

Answer 3

Свойство nextSibling возвращает узел, следующий сразу за указанным узлом, на том же уровне дерева.

Возвращенный узел возвращается как объект Node.

Разница между этим свойством и nextElementSibling, заключается в том, что nextSibling возвращает следующий узел-брат как узел элемента, текстовый узел или узел комментария, а nextElementSibling возвращает следующий узел-брат как узел элемента (игнорирует узлы текста и комментариев).

Это свойство доступно только для чтения.

http://www.w3schools.com/jsref/prop_node_nextsibling.asp