innerText和innnerHTML的用法和区别可以看到弹窗内容把div标签里的p标签也显示了出来。那这样有什么用呢

用俩个例子来举例

一、innerText用来设置或获取标签内文文内容：

获取内容

<body>
    <div id="div1">123</div>//是一个盒子标签
    <script>
    var obj = document.getElementById("div1");//通过ID获取元素
    alert(obj.innerText);//弹窗显示innerText内容
    </script>
</body>

弹窗显示为

设置内容

<body>
    <div id="div1"></div>//是一个盒子标签
    <script>
    var obj = document.getElementById("div1");//通过ID获取元素
    var oset = obj.innerText = "456";//设置文本内容
    </script>
</body>

页面显示结果

二、innnerHTML用来获取标签元素或设置标签元素（文本同样可以获取）：

获取内容

<body>
    <div id="div1"> //往盒子内部添加俩个P标签
        <p>123</p>
        <p>456</p>
    </div>
    <script>
    var obj = document.getElementById("div1");//通过ID获取元素
    alert(obj.innerHTML);//弹窗显示innnerHTML内容
    </script>
</body>

弹窗显示为

可以看到弹窗内容把div标签里的p标签也显示了出来。那这样有什么用呢？接下来innerHTML的有趣之处就来了

设置内容

<body>
    <div id="div1"> //往盒子内部添加俩个P标签
        <p>123</p>
        <p>456</p>
    </div>
    <script>
    var obj = document.getElementById("div1");//通过ID获取元素
    obj.innerHTML = "<span>123</span>";//设置innerHTMl的内容
    </script>
</body>

页面显示为

我们可以看到，原来页面的内容和标签都被覆盖，怎么解决这个问题呢？我们对innerHTML进行+=操作

<body>
    <div id="div1"> //往盒子内部添加俩个P标签
        <p>123</p>
        <p>456</p>
    </div>
    <script>
    var obj = document.getElementById("div1");//通过ID获取元素
    obj.innerHTML += "<span>123</span>";;//设置innerHTMl的内容+=
    </script>
</body>

页面显示为

我们可以看到，新的元素标签被默认添加到了已有元素的后方

那么重点来了，这个可以用来干嘛呢，我们可以通过点击事件，对元素经行添加子元素，比如新闻发表，qq说说等小的案例，都是通过添加子元素标签来实现的

明天附上新闻发表的代码，大家可以自己先思考思考