การค้นหาองค์ประกอบที่อยู่ติดกันใน JavaScript

previousElementSiblingnextElementSibling
Задание 1

กำหนดองค์ประกอบ #elem:

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

ค้นหาองค์ประกอบที่อยู่ติดกันด้านบนของมันและเพิ่มข้อความ '!' เข้าไปท้าย

Задание 2

กำหนดองค์ประกอบ #elem:

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

ค้นหาองค์ประกอบที่อยู่ติดกันด้านล่างของมันและเพิ่มข้อความ '!' เข้าไปท้าย

Задание 3

กำหนดองค์ประกอบ #elem:

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

ค้นหาองค์ประกอบที่อยู่ติดกันด้านล่างขององค์ประกอบที่อยู่ติดกันด้านล่างของมัน (องค์ประกอบถัดไปจากองค์ประกอบที่อยู่ติดกัน) และเพิ่ม ข้อความ '!' เข้าไปท้าย

Задание 4

กำหนดองค์ประกอบ #elem:

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

สลับข้อความขององค์ประกอบที่อยู่ติดกันด้านบน กับข้อความขององค์ประกอบที่อยู่ติดกันด้านล่าง