Question

我正在尝试创建一个动态创建某些元素的网页。我写了以下内容：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <p>Here's some example text</p>
        <script type="text/javascript">
        var jselem = document.createElement ("div");
        jselem.innerHTML = '<p>and here\'s some more</p>';
        </script>
    </body>
</html>

然而，JS部分似乎没有做任何事情，文本and here's some more没有打印。

有人可以解释为什么它不起作用吗？任何帮助表示赞赏。

（请不要建议使用document.write()或类似内容。）

Answer 1

使用document.body.appendChild()（fiddle）

<script type="text/javascript">
    var jselem = document.createElement("div");
    jselem.innerHTML = '<p>and here\'s some more</p>';
    document.body.appendChild(jselem);
</script>

Answer 2

您创建了该元素，但尚未将其插入到文档中。这不会自动发生 - 直到你这样做，它只是一个在内存中浮动的div。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.createElement

我使用Javascript / DOM动态创建了一个div。如何让div显示在页面上？

2 个答案: