使用Javascript将元素追加到页面

在Js中最容易做的事情就是让我头痛。我只是试图将我在vanilla js中创建的搜索栏附加到我的页面，但控制台不断发送错误，如“is null”或“Node.appendChild的参数1未实现interface Node” 代码如下：

var searchBar = function createBar (searchString) {

var studentSearch = document.createElement("div");
var input = document.createElement("input");
var searchButton = document.createElement("button");

input.type="text";

searchButton.innerText="Search";
studentSearch.className = "student-search";

//append these elements to the page
studentSearch.appendChild(input);
studentSearch.appendChild(searchButton);

return studentSearch; }

然后我将其添加到页面onload：

var pageHeader = document.querySelector(".page-header");
function addSearchBar () {
    console.log('Adding search bar, trying to anyway...')
    pageHeader.appendChild(searchBar);
}

window.onload = addSearchBar;

在HTML方面，我的div如下所示：

 <div class="page-header cf">
    <h2>Students</h2>
  </div>

学生

有什么帮助吗

---

Ps：我需要使用Vanilla Js，所以没有jQuery…

您忘记调用函数来生成DOM元素

pageHeader.appendChild（搜索栏）

应该是：

pageHeader.appendChild（searchBar（））
您忘记调用函数来生成DOM元素

pageHeader.appendChild（搜索栏）

应该是：

pageHeader.appendChild（searchBar（））
尝试：

    var txtNode = document.createTextNode("Hello World");
    if ( typeof txtNode == "object" ) {
        document.getElementsByName("body").appendChild(txtNode);
    }

如需更多帮助：

如果你调用了一个函数，那么就开始检查结果是否有效

不要使用innerText，因为并非所有浏览器都支持它，请按照上面的示例创建一个文本节点并附加该节点

要设置类似“class”的属性，请使用setAttribute方法

    el.setAttribute("class", "name of your class");

尝试：

如需更多帮助：

如果你调用了一个函数，那么就开始检查结果是否有效

不要使用innerText，因为并非所有浏览器都支持它，请按照上面的示例创建一个文本节点并附加该节点

要设置类似“class”的属性，请使用setAttribute方法

    el.setAttribute("class", "name of your class");

看起来您从未调用过searchBar函数。e、 g.在
addSearchBar
功能中，
pageHeader.appendChild（searchBar）应该是
pageHeader.appendChild（searchBar（））。注意
searchBar
vs
searchBar（）

另外，我建议将定义
pageHeader
的部分移动到addSearchBar函数中，因为您在
onload
事件之前设置了pageHeader，这取决于页面加载的方式以及触发onload之前页面上发生的其他事情，在
onload
事件之前设置
.page header
节点时，该节点可能还不存在

下面是一个在
上运行的代码示例，看起来您从未调用过searchBar函数。e、 g.在
addSearchBar
功能中，
pageHeader.appendChild（searchBar）应该是
pageHeader.appendChild（searchBar（））。注意
searchBar
vs
searchBar（）

另外，我建议将定义
pageHeader
的部分移动到addSearchBar函数中，因为您在
onload
事件之前设置了pageHeader，这取决于页面加载的方式以及触发onload之前页面上发生的其他事情，在
onload
事件之前设置
.page header
节点时，该节点可能还不存在

下面是您在
上的代码的工作示例，谢谢您的帮助！是的，我会尽量把变量放在页面顶部：）谢谢你的帮助！是的，我尝试将变量保留在页面顶部：）