Question

在Js中最简单的事情是让我头疼。我只是试图将我在vanilla js中创建的搜索栏附加到我的页面，但控制台一直发送错误，如'is null'或'Node.appendChild的参数1没有实现接口节点。' 这是代码：

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 ......

Answer 1

尝试：

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

获取更多帮助：http://www.w3schools.com/

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

不要使用innerText，因为它不受所有浏览器的支持，创建一个文本节点，如上例所示，并附加该文本节点。

设置＆＃39; class＆＃39;等属性使用setAttribute方法。

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

Answer 2

看起来你永远不会调用searchBar函数。例如在addSearchBar函数中，pageHeader.appendChild(searchBar);应为pageHeader.appendChild(searchBar());。请注意searchBar vs searchBar()。

此外，我建议您将定义pageHeader的部分移动到addSearchBar函数中，因为您在onload事件之前设置了pageHeader，具体取决于您的网页加载方式和其他内容在onload被触发之前发生在您的页面上，.page-header节点在onload事件之前设置时可能还不存在。

以下是codepen

上代码的工作示例

Answer 3

您忘记调用该函数，以生成DOM元素。

pageHeader.appendChild(searchBar);

应该是：
pageHeader.appendChild(searchBar());

使用Javascript将元素添加到页面

3 个答案: