How to change element tag without affecting its children?

Question

I have the following HTML:

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

How can I use vanilla JS to select #randomList and change the parent element's tags (both beginning and ending tag) so the output is the following:

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

Thanks!