如何利用js的控制在其中ul下的li标签中插入一个div



```html
<ul class="sm_list">
            <li class  ="sm_Item">1</li>
            <li class="sm_Item">1</li>
            <li class="sm_Item">1</li>
            <li class="sm_Item">1</li>
        </ul>


我想在ul下的li标签循环下，随机指定位置插入一块div，请问有很好的方法吗？


<ul class="sm_list">
            <li class="sm_Item">1</li>
            <li class="sm_Item">1</li>
            <li class="sm_Item">1</li>
            <div class="sm_Itemads">
                <img src="" alt="">
            </div>
            <li class="sm_Item">1</li>
        </ul>

```


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="sm_list">
        <li class="sm_Item">1</li>
        <li class="sm_Item">1</li>
        <li class="sm_Item">1</li>
        <li class="sm_Item">1</li>
    </ul>
</body>
<script>
    var div = document.createElement("div");
    div.innerText = 'hi';
    let random = Math.floor(Math.random() * 4);
    var items = document.querySelectorAll('.sm_Item');
    document.querySelector('.sm_list').insertBefore(div, items[random]);
</script>
</html>

```

https://www.runoob.com/try/try.php?filename=tryjsref_node_appendchild
自己稍微改下就可以了

img