Question

<!DOCTYPE>
<html>
<script>
    var btn = document.createElement("BUTTON");
    var txt = document.createTextNode("Text");
    btn.appendChild(txt);
    document.body.appendChild(btn);
</script>
</html>

我刚开始学习HTML和JavaScript。

我期待上面的代码输出一个带有“text”字样的按钮。不幸的是，输出是空白的。有人可以向我解释为什么这段代码不起作用吗？

Answer 1

你的脚本不会做任何事情，因为它在头部，所以你的脚本在身体之前运行你需要使用window.onload这样的函数

<!DOCTYPE>
<html>
<script>
window.onload = function(){
    var btn = document.createElement("BUTTON");
    var txt = document.createTextNode("Text");
    btn.appendChild(txt);
    document.body.appendChild(btn);
}
</script>
</html>

Answer 2

jsve很接近。您需要确保在正文加载时加载代码。这是通过调用body的onload函数完成的，就像这样......

<!doctype html>
<html>
<head>
    <script>
    function init(){
        var btn = document.createElement("BUTTON");
        var txt = document.createTextNode("Text");
        btn.appendChild(txt);
        document.body.appendChild(btn);
    }
    </script>
</head>
<body onload="init()"></body>
</html>

Answer 3

您需要在加载正文后运行该代码：

<!doctype html>
<html>
<head>
    <script>
        function addBtn() {
            var btn = document.createElement("button");
            var txt = document.createTextNode("Text");
            btn.appendChild(txt);
            document.body.appendChild(btn);
        }
    </script>
</head>
<body onload="addBtn()"></body>
</html>

还有一些评论：

如上所示，您还需要将DOCTYPE更新为<!doctype html>。
将<script>标记包裹在<head>标记内。
无需大写button。

动态创建html文档

3 个答案: