Question

我正在学习如何开发动态网页，并尝试使用HTML DOM添加JS对象，但是经过几次故障排除尝试后却什么都没出现。

我尝试使用.createAttribute（）而不是.setAttribute（），并仔细阅读了所有方法的说明，以确保正确使用了它们。

<html>
    <body>
        <div id="greeting_section">
        </div>
    <script>
        let greeting_post = document.createElement("P");
        greeting_post = document.setAttributeNode("id","post");
        let greeting_post_text = document.createTextNode("howdy howdy");
        greeting_post.appendChild(greeting_post_text);
        document.getElementById("greeting_section").appendChild(greeting_post);        
    </script>   
    </body>
</html>

我希望它输出“ howdy howdy”，但在我的Firefox浏览器中什么也没显示。

Answer 1

您似乎正在覆盖greeting_post。另外，您可能只是想使用setAttribute而不是setAttributeNode。请参见下面的工作示例。

let greeting_post = document.createElement("P");
greeting_post.setAttribute("id","post");
let greeting_post_text = document.createTextNode("howdy howdy");
greeting_post.appendChild(greeting_post_text);
document.getElementById("greeting_section").appendChild(greeting_post);

<html>
    <body>
        <div id="greeting_section">
        </div>
    </body>
</html>

Answer 2

首先：当我运行您的代码时，浏览器控制台显示此错误

未捕获的TypeError：document.setAttributeNode不是函数

这是当代码不起作用时应该做的第一件事，看看浏览器控制台。

第二个：在您的代码greeting_post = document.setAttributeNode("id","post");中，您试图将id="post"添加到greeting_post变量中，这是p标记，表明您做错了，您的代码意味着更改了变量{{1 }}设为新值greeting_post，这意味着将属性id =“ post”设置到文档。因此，代替您的代码，正确的代码应如下所示：

document.setAttributeNode("id","post");

这是英文意思，选择greeting_post.setAttribute("id","post");并将其属性设置为greeting_post

最后，完整的代码应如下所示：

id="post"

使用HTML DOM的麻烦.createElement（）、. setAttributeNode（）和.appendChild（）方法

2 个答案: