JavaScript - 将插入符号移动到contenteditable div中的下一行（模拟向下箭头单击）

Question

我有问题。我正在尝试创建一个函数，将插入符号移动到可满足div下面的行，我不知道该怎么做。让我解释一下我的问题：

＆＃13;

＆＃13;

function SomeMagicFunction() {

}

＆＃13;

#box {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

＆＃13;

<button onclick="SomeMagicFunction();">Move to next line</button>
<div contenteditable="true" id="box">
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
  <p>SomeTextSomeText</p>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的例子中，将光标/插入符号放在第一行并按下按钮后，光标/插入符应位于第二行。我不知道如何制作MagicFunction()。那么如何使用JavaScript和/或JQuery呢？谢谢你的帮助。