JS之动态创建元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #btn {
            /*去除a标签下划线*/
            text-decoration: none;
        }
    </style>
    <script>
        // 动态创建元素的三种方式
        // document.write(); 缺点：会清空页面内容，最不常用
        // ele.innerHTML;
        // document.createElement();
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                document.write('Hello <p>world</p>')
            }
        }
    </script>
</head>
<body>
<h1>标题</h1>
<ul>
    <!--去除a标签跳转-->
    <li><a href="javascript:void(0)" id="btn">点我</a></li>
</ul>
</body>
</html>