Получите содержимое div до и после id (или класса) с помощью собственного Javascript

Question

Я пытаюсь (в собственном Javascript, поэтому без jQuery или что-то еще), чтобы получить контент до и после появления div.

HTML:

<div id="thisIsWhatIWant"> 
    <span>foo</span> 
    <div id="helloWorld">hello world</div> 
    <p>bar</p> 
</div> 

Так что я хочу, чтобы получить <span>foo</span> и <p>bar</p> в отдельном Варсе.

JS:

var beforeElement_helloWorld = ...do something to get <span>foo</span>... 
var afterElement_helloWorld = ...do something to get <p>bar</p>... 

примечание:
Там может быть много больше дивов, пролетов и т.д. в примере HTML.

Answer 1

Вам нужно это:

var previous = document.getElementById("helloWorld").previousElementSibling; 
var next = document.getElementById("helloWorld").nextElementSibling; 

прочитать Кроме того, это, Разницы между PreviousSibling и previousElementSibling, что PreviousSibling возвращает предыдущий узел родственного как узел элемента, текстовой узел или комментарий узел, в то время как previousElementSibling возвращает предыдущий узел брата как узел элемента (игнорирует текстовые и комментарии узлов).