如何更改元素标签而不影响其子元素？

Question

我有以下HTML：

<ul id="randomList">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</ul>

如何使用普通JS选择#randomList并更改父元素的标签（开始标签和结束标签），因此输出如下：

<div id="randomList">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>

谢谢！