dom的创建和插入节点

创建

var innerDiv = document.createElement("div")

创完还要插入到元素里面

插入

var boxEl = document.querySelector('.box');

var innerDiv = document.createElement("div")

boxEl.parentNode.insertBefore(innerDiv, boxEl)//在boxEl的前面插入,如果要在最后就把boxEl换为null

几种简单的插入方法

在元素boxEl内部加入div

function innsertDiv() {
            var boxEl = document.querySelector('.box');;
            var addDiv = document.createElement("div")
            addDiv.className = "box1"
            addDiv.style.backgroundColor = randomColor()
            boxEl.insertBefore(addDiv, null)
        } //在元素boxEl内部加入div

把已有的movDiv放到boxEl里面

 function moveDiv() {
            var boxEl = document.querySelector('.box');;
            var movDiv = document.querySelector(".box1")
            boxEl.appendChild(movDiv)
        } //把已有的movDiv放到boxEl里面

给boxEl的最后添加图片

 function addImg() {
            var boxEl = document.querySelector('.box');;
            var imgEl = document.createElement("img")
            imgEl.style.height = "50px"
            imgEl.style.width = "50px"
            imgEl.src = "../public/img/a.jpg"
            boxEl.parentNode.insertBefore(imgEl, null)
        } //给boxEl的最后添加图片