67 创建带文本的元素节点

00 write

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1{
                width: 300px;
                height: 400px;
                background-color: red;
            }
        </style>
        <script>
            window.onload = function(){
                var oBut = document.getElementById("but")
                oBut.onclick = function(){
                    document.write("<h1>我是标题标签</h1>")
                    //【注】document.write()    在添加内容的时候 会将页面上原有的内容覆盖掉
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <button id="but">按钮</button>
    </body>
</html>

01 节点操作方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                createElement()
                【格式】document.createElement(标签名)

                appendChild()
                【格式】parent.appendChild(newNode)
                功能：将newNode插入到parent子节点的末尾

                createTextNode()
                【格式】document.createTextNode(文本)
                功能：创建文本节点
            */
            window.onload = function(){
                var oDiv = document.getElementById("div1")
                var oBtu = document.getElementById("btu")
                oBtu.onclick = function(){
                    //1、创建span节点
                    var node = document.createElement("span")
                    //alert(node)       [object HTMLSpanElement]
                    //2、给span节点中添加文本
                    var oText = document.createTextNode("文本内容")
                    //3、将文本插入到节点中
                    node.appendChild(oText)
                    //4、将节点插入到div中

                    //var node = createElementWithText("span", "文本内容")

                    oDiv.appendChild(node)    
                }
            }

            /*
                【注】创建一个带文本的元素节点
            */

            function createElementWithText(tagName, txt){
                var node = document.createElement(tagName)
                var text = document.createTextNode(txt)
                node.appendChild(text)
                return node
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <em>斜体</em>
            <p>p</p>
        </div>
        <button id="btu">按钮</button>
    </body>
</html>