看 insertAdjacentElement 的第一眼：这啥玩意儿？看了图后：设计得真好

insertAdjacentElement(position, element)¹

• 'beforebegin': Before the targetElement itself.
• 'afterbegin': Just inside the targetElement, before its first child.
• 'beforeend': Just inside the targetElement, after its last child.
• 'afterend': After the targetElement itself.

一堆的 before/begin/after/end 真的有够晕的。

但是直到看了图示的第一眼：简直了，世界上没有比这更清晰明了的解释了：

1 2 3 4 5 6 7

<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend -->