用JS创建一个页面,页面上有一个文本框、一个按钮和一个div

用js创建一个页面,页面上有一个文本框、一个按钮和一个div,按钮显示“请在文本框中输入你的姓名”,而文本框的value值默认为自己的姓名。要求实现效果为:当单击该按钮后,页面会弹出对话框显示“你好,xx!”(xx是文本框的value属性值),并在div中显示显示“这里是xx的页面”(xx是文本框的value属性值)。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="text" id="name">
        <button id="btn">请在文本框中输入你的姓名</button>
        <div id="msg"></div>
    </body>
</html>
<script type="text/javascript">
    document.getElementById("name").value = '默认姓名';
    document.getElementById("btn").onclick = () => {
        const name = document.getElementById("name").value;
        document.getElementById('msg').innerText = '这里是' + name + '的页面';
        alert('你好,' + name + '!');
    }
</script>