javascript中如何在body中动态添加div元素？

详细的解题步骤如下：

<div id="parent"></div>

function addElementDiv(obj) {

var parent = document.getElementById(obj)

//添加 div

var div = document.createElement("div")

//设置 div 属性，如 id

div.setAttribute("id", "newDiv")

div.innerHTML = "js 动态添加div"

parent.appendChild(div)

}

调用：addElementDiv("parent")

什么是DIV元素：

1、DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为"DIV block"，或"DIV element"或"CSS-layer"，或干脆叫"layer"。而中文我们把它称作"层次"。

2、DIV元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

在写手机端的时候经常用到tab，tab切换一般都是transition滑动的，如果此时我们用position:fixed定位会发现，元素定位并不是我们想象中的相对浏览器定位，这是因为fixed定位会被拥有transition属性的元素影响。

为了结果这个问题，我们需要将元素变成相对于浏览器定位，这个时候我们就要将这个需要定位的dom元素挂载到根节点下，实现方式如下

import hello from "@/components/HelloWorld.vue"

mounted(){

    this.appendCompToRoot(hello)

},

appendCompToRoot(component) { 

    //component 参数为组件名

      var instance = new Vue({

        el: document.createElement("div"),

        render: h => h(component)

      })

      document.body.appendChild(instance.$el)

}

 <div class="home">    

        <h1>home</h1>   

         <div id="mountDiv" ref="mountDiv">      

                <img src="logo.png" alt />   

         </div> 

 </div> 

 mounted() {

    this.appendDomToRoot(document.querySelector("#mountDiv"), "#container")

 },

appendDomToRoot(el, selector) {

    //el 为要 *** 作的dom元素，selector为要插入的根节点的选择器，为空的话，直接插入到body中 

      var container

      if (selector) {

        container = document.querySelector(selector)

      }

      if (!container) {

        container = document.body

      }

      container.appendChild(el)

    },

<teleport to="#app">

      <div id="mountDiv" ref="mountDiv">

            <img src="logo.png" alt />

      </div>

</teleport>

---