#javascript #html
#javascript #HTML
Вопрос:
То, что должно быть проще всего сделать в 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…
Ответ №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");
Ответ №2:
Похоже, вы никогда не вызываете функцию панели поиска. например, в addSearchBar
функции pageHeader.appendChild(searchBar);
должно быть pageHeader.appendChild(searchBar());
. Обратите внимание на searchBar
vs searchBar()
.
Кроме того, я рекомендую переместить часть, в которой вы определяете pageHeader
, в функцию addSearchBar, потому что вы устанавливаете PageHeader перед onload
событием, и в зависимости от того, как загружается ваша страница и что еще произошло на вашей странице до запуска onload, .page-header
узел может еще не существовать, когда вы устанавливаете его перед onload
событием.
Вот рабочий пример вашего кода в codepen
Комментарии:
1. Спасибо за вашу помощь! Да, я стараюсь, чтобы мои переменные находились в верхней части страницы 🙂
Ответ №3:
Вы забыли вызвать функцию, чтобы сгенерировать элемент DOM.
pageHeader.appendChild(searchBar);
Должно быть:
pageHeader.appendChild(searchBar());