JavaScript document.createElement 未显示任何结果-6ren

JavaScript document.createElement 未显示任何结果

转载作者：行者123 更新时间：2023-11-28 17:33:14

25

4

我正在尝试帮助一位 friend 制作他的网站学校项目，但遇到了问题。它本来应该有 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>

最佳答案

您向 document.createElement 传递了不正确的参数 - 可以在此处找到此方法的文档:document.createElement

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

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

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

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

返回单个元素

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

一起:

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

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

<form class="buttons">

  

</form>

忠告:从您在此处提供的代码来看，您可能对这门语言了解不够，无法协助向其他人教授该语言。这并不是说你没有资质或能力，但看来你需要花更多时间研究 Material 才能达到这一点。

关于JavaScript document.createElement 未显示任何结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49824383/

25

4

0

文章推荐： ios - 如何在未端到端连接的 quartz 上下文中绘制线条？

文章推荐： ios ASIHTTPRequest 在我的 iPod v4.2.1 上测试时停止工作

文章推荐： jquery - 视差滚动不同的形状

reactjs - 我重写了 React.createElement，但是 jsx 的按钮好像没有调用 React.createElement
我覆盖了React.createElement，但是jsx的按钮好像没有调用React.createElement。 React.createElement 没有获取到 jsx 的值作为按钮。最佳答
javascript - 我可以安全地使用 document.createElement 而不是 forms[i].document.createElement ('INPUT' )吗？
我支持一些旧版 JavaScript。在 IE8 中这有效: var hi = forms[i].document.createElement('INPUT'); 在 IE 11 中，该代码会引发异
php - 查找并替换 html(Zend_Dom_Query+createElement()) : Call to a member function createElement() on a non-object
我需要在 html 代码中查找并替换一些 html 元素(我遵循了这个答案:Getting an element from PHP DOM and changing its value)，为此我检索了
用于动态下拉菜单的javascript createelement
我是 JavaScript 中 createElement 属性的新手。我需要从 MySQL 查询创建一个下拉菜单。我从 MySQL 查询创建了一个 PHP 数组，如下所示: 然后我写了JavaSc
jQuery 相当于 createElement？
function ytplayer_render_playlist(){ for(var i=0;i', { src: "http://img.youtube.com/vi/" + y
JavaScript createElement 函数
我有一些代码在 main.js 文件中复制 Javascript 重复示例: Example 1 for (i = userVote; i function createElement(elemen
javascript - createElement 方法可以应用于除文档之外的任何节点吗？
.dot{ width: 8px; height: 8px; border-radius: 4px;
javascript - createElement() 未显示在查看源代码中
这个问题在这里已经有了答案: jQuery DOM changes not appearing in view source (5 个答案) 关闭 8 年前。我编写此脚本是为了了解如何使用 cre
Javascript 子类化和 createElement
函数 A() { this.myProp = document.createElement("div"); function B(id) { this.myProp.id = id;
JavaScript createElement 帮助
我有以下代码: function JS_Utils_BuildModal () { var objModal = document.createElement(
javascript - 无法读取未定义的属性 'createElement'
我的 React 应用程序出现了一些问题。我正在实现功能 authUser，现在我收到如下错误: TypeError: Cannot read property 'createElement' of
javascript - createElement 显示为文本节点
为什么会 console.log(document.createElement("p").appendChild(document.createTextNode("some text"))); 返回
Javascript createElement 并追加子节点
我正在尝试创建一个元素并向其附加一个子节点，但我的返回只是一个没有该元素的字符串。我首先创建元素 const li = document.createElement('li'); 其次，我使用以下命
JavaScript createElement qn
为什么这段代码不起作用？当我使用注释部分而不是表格时，它起作用了......使用table为什么不能工作？ function addLine() {
javascript - 如何在纯javascript中创建多个div(createElement)
是否有任何解决方案可以在纯 JavaScript 中构建使用 in div 的多个 div？ jQuery 版本 for (var i = 1; i new divs') } http://jsf
javascript - createElement 和伪类
CSS div.online:last-child { color:green; } div.offline:last-child { color:green; } JavaScipt
Javascript createElement，修改输出
我为我的网站下载了一个 livesearch JavaScript 插件，它可以工作，但我需要帮助来稍微修改它。代码如下: $.ajax({url: $('base').attr('href
javascript - createElement - 选择散布在文本中间的框
这是我要创建的 HTML: Tiana is ... keen to go to the ... market. 如您所见，有一个包含散文句子的元素，中间带有选择框。使用 $('#id').h
Javascript createElement 没有结束标签
我正在尝试使用 document.createElement('circle') 来处理 svgs 但 Chrome 会创建一个结束标记来圈出错误的结果。如何创建没有结尾的元素？最佳答案你可能
Javascript createElement，添加html元素和简单文本
我正在尝试用 javascript 创建这个 html block : name }}" type="checkbox" class="minimal"> text 我有: var che

首页

博学

6Ren·AI

商城

JavaScript document.createElement 未显示任何结果