Question

我正在尝试帮助一位朋友制作他的网站学校项目，但我遇到了一个问题。这意味着有3个文本框，其中有一个可以添加更多文本框的按钮，我尝试使用document.write，但它会覆盖整个页面，所以我查了一下，然后我发现了document.createElement，它没有＆{似乎也可以。

我不知道我的代码中是否有任何错误。

 <!DOCTYPE html>
<html>
    <head>
        <style>
            .input {
                margin-top: 50px;
            }

            .input .submit {
                float: left;
            }
            .add {
                margin-left: 100px;
                margin-top: 50px;
                width: 50px;
                height: 50px;
                font-size: 30px;
            }

            .gen {
                float: right;
                margin-right: 100px;
                width: 400px;
                height: 50px;
                font-size: 25px;
            }

            .output {
                position: fixed;
                margin-top: 100px;
                float: right;
                margin-left: 400px;
            }

        </style>

        <script language="javascript" type="text/javascript">

                 var input = document.createElement("<p>Hello</p>");
                 var container = document.getElementsByClassName("buttons");


            container.appendChild(input);


        </script>

    </head>

    <body>

        <form class="buttons">
        <input type="text" class="input">
        <input type="submit" class="submit">
        <br>

        <input type="text" class="input">
        <input type="submit" class="submit">
        <input type="button" class="gen" value="Click to generate a random word">
        <input type="text" class="output">
        <br>

        <input type="text" class="input">
        <input type="submit" class="submit">
        <br>


        </form>

        <input type="button" class="add" value="+" >

    </body>
</html>

Answer 1

您将错误的参数传递给document.createElement - 此方法的文档可在此处找到：document.createElement

document.createElement接受标记名称，但您必须通过对象操作添加其他属性。

var p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);

其次，您使用的var container = document.getElementsByClassName("buttons")也不正确。您正在尝试获取容器元素，但要求它获取元素 s 的列表，其类名为＆＃34;按钮＆＃34;。这将返回一个数组，并要求您选择返回的第一个选项，例如container[0].appendChild

实际上你应该使用ID而不是类名。 ID是唯一的，因此可以在文档中轻松找到单个元素，类名称用于更改多个元素。鉴于您的情况，您应该更改初始查询，以便它只使用document.querySelector(".buttons")

返回单数元素

var container = document.querySelector(".buttons");

All Together：

＆＃13;

var p = document.createElement("p");
p.textContent = "Hello";

var container = document.querySelector(".buttons");
container.appendChild(p);

＆＃13;

<form class="buttons">

  

</form>

＆＃13;

建议：根据您在此处提供的代码判断，您可能不太了解该语言，无法协助将其传授给他人。这并不是说你没有能力或能力，但在达到这一点之前，你似乎需要花更多的时间研究这些材料。

Answer 2

您有几个问题，第一个是当您的脚本运行时，没有可供查找的元素，因此您需要等待使用window.onload = function() { /* ... */ }之类的内容加载文档。第二个是getElementsByClassName返回HTMLCollection（本质上是一个节点数组）。你必须得到你想要的那个，否则方法appendChild将不存在（因为HTMLCollection没有这样的方法）。此外，createElement采用元素的名称，在本例中为p，然后您可以使用setInnerHTML来设置内容。

您的代码应该类似于：

window.onload = function() {
     var input = document.createElement("p");
     input.innerHTML = 'Hello';
     var container = document.getElementsByClassName("buttons");
     container[0].appendChild(input);
};

JavaScript document.createElement没有显示任何结果

2 个答案: