JavaScript 如何创建search字段

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何创建Search字段</title>
    <script>
    window.onload=function () {
        // 获取button元素
        document.getElementsByTagName("button")[0].onclick=function () {
            // 创建input元素赋值给x
            var x = document.createElement("INPUT");
            // 给input元素设置type属性
            x.setAttribute("type", "search");
            // 将x元素追加到元素span中
            document.getElementsByTagName('span')[0].appendChild(x);
        }
    }
    </script>
</head>
<body>
    <button>点击创建Search字段</button>
    <div style=" 600px; height: 200px; background-color:lightgreen;">
        <p>
            请输入搜索字段:
            <span></span>
        </p>
    </div>
</body>
</html>