Search for siblings of elements in JavaScript

Задание 1

Given the element #elem:

html<ul>
  <li>text</li>
  <li>text</li>
  <li id="elem">text</li>
  <li>text</li>
  <li>text</li>
</ul>

Find its upper sibling element and add the text '!' to the end of it.

Задание 2

Given the element #elem:

html<ul>
  <li>text</li>
  <li>text</li>
  <li id="elem">text</li>
  <li>text</li>
  <li>text</li>
</ul>

Find its bottom sibling element and add the text '!' to the end of it.

Задание 3

Given the element #elem:

html<ul>
  <li>text</li>
  <li>text</li>
  <li id="elem">text</li>
  <li>text</li>
  <li>text</li>
</ul>

Find its bottom sibling of its bottom sibling (the next element after the next one) and add the text '!' to the end of it.

Задание 4

Given the element #elem:

html<ul>
  <li>text1</li>
  <li>text2</li>
  <li id="elem">text3</li>
  <li>text4</li>
  <li>text5</li>
</ul>

Swap the text of its upper sibling and the text of its bottom sibling.