Блог

То, что должно быть проще всего сделать в Js, вызывает у меня головную боль. Я просто пытаюсь добавить свою панель поиска, которую я создал в vanilla js, на свою страницу, но консоль продолжает отправлять ошибки типа «is null» или «Аргумент 1 узла.appendChild не реализует узел интерфейса». Вот код:

 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: Мне нужно использовать ванильный Js, поэтому нет jQuery…

Попробуйте:

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

Похоже, вы никогда не вызываете функцию панели поиска. например, в addSearchBar функции pageHeader.appendChild(searchBar); должно быть pageHeader.appendChild(searchBar()); . Обратите внимание на searchBar vs searchBar() .

Кроме того, я рекомендую переместить часть, в которой вы определяете pageHeader , в функцию addSearchBar, потому что вы устанавливаете PageHeader перед onload событием, и в зависимости от того, как загружается ваша страница и что еще произошло на вашей странице до запуска onload, .page-header узел может еще не существовать, когда вы устанавливаете его перед onload событием.

Вот рабочий пример вашего кода в codepen

Вы забыли вызвать функцию, чтобы сгенерировать элемент DOM.

pageHeader.appendChild(searchBar);

Должно быть:
pageHeader.appendChild(searchBar());