Dom对象更改文档结构.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>helloworld</h1>
        
        <script type="text/javascript">
            var h1 = document.querySelector('h1')
            //一般使用innerHTML,可以将HTML的字符串直接放置进来，那么浏览器会自动生成相对应的文档对象和显示内容
            h1.innerHTML = "<span style='font-size: 12px; color: #aaa;'>samalltitle</span>BigTitle"
//            h1.innerText = '<span>helloworld</span>'


            var span = document.querySelector('span')
            console.log(span)
            span.innerHTML = 'helloworld'
            
//            document.write('<h3>helloworld</h3>')
            //创建元素
            var h3 = document.createElement('h3')
            h3.innerHTML = '这是H3'
            //获取想要添加进去的父级元素
            var body = document.body
            //使用appendchild,追加子元素，将h3添加进body
            body.appendChild(h3)

//            body.removeChild(h3)
            //仅仅通过自己就可以删除自己
            h3.parentElement.removeChild(h3)
        </script>
        
        
    </body>
</html>