Question

使用 Javascript 将元素附加到页面

2016-10-06

751

javascript html

在 Js 中本应最容易做的事情却让我头疼。我只是想将我在 vanilla js 中创建的搜索栏附加到我的页面，但控制台不断发送错误，如 'is null' 或 'Node.appendChild 的参数 1 未实现接口 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...

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");

Answer 2

看起来您从未调用过 searchBar 函数。例如在 addSearchBar 函数中， pageHeader.appendChild(searchBar); 应为 pageHeader.appendChild(searchBar()); 。请注意 searchBar 与 searchBar() 。

此外，我建议将定义 pageHeader 的部分移到 addSearchBar 函数中，因为您在 onload 事件之前设置 pageHeader，并且根据页面的加载方式以及在触发 onload 之前页面上发生的其他事情，当您在 onload 事件之前设置 .page-header 节点时，该节点可能尚不存在。

以下是您在 codepen

上的代码工作示例

Answer 3

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

pageHeader.appendChild(searchBar);

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