javascript - 使用 Javascript 将元素附加到页面

Question

在Js中应该最容易做的事情却让我头疼。我只是试图将我在 vanilla js 中创建的搜索栏附加到我的页面，但控制台不断发送错误，例如 'is null' 或 'Node.appendChild 的参数 1 未实现接口(interface)节点。'这是代码:

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; }

然后我将其添加到页面加载中:

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，因为并非所有浏览器都支持它，请按照上面的示例创建一个文本节点并附加它。

要设置“class”等属性，请使用 setAttribute 方法。

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