我想动态插入div怎么办?


        <article>
            <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>
        </article>
        <script>
            var divElement = document.createElement("div");
            divElement.className = 'sm_randImg';            
            divElement.innerText = 'img';
            let random = Math.floor(Math.random() * 4);
            var items = document.querySelectorAll('.sm_Item');
            document.querySelector('.sm_list').insertBefore(divElement, items[random]);
        </script>

我研究了老半天,插入了div,但是我还想在div下面插入一个img,研究了好久没整会,该怎么做?

是这样吗?

<!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>test</title>
</head>
<body>
     <article>
         <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>
     </article>
     <script>
         var divElement = document.createElement("div");
         divElement.className = 'sm_randImg';
         divElement.innerHTML = '<img src="https://img-home.csdnimg.cn/images/20220714095547.png"></img>';
         let random = Math.floor(Math.random() * 4);
         var items = document.querySelectorAll('.sm_Item');
         document.querySelector('.sm_list').insertBefore(divElement, items[random]);
     </script>
</body>
</html>

与其你这么写,innerhtml += innerhtml不是更方便吗

document.createElement()创建标签