appenChild не является функцией на моей странице php

Question

Привет всем, почему возвращается «appenChild - это не функция?»

function showBooks(ajax) {
         var books = ajax.responseXML.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
    var titleNode  = books[i].getElementsByTagName("title")[0];
    var authorNode = books[i].getElementsByTagName("author")[0];
    var title  = titleNode.firstChild.nodeValue;
    var author = authorNode.firstChild.nodeValue;
    var year = books[i].getAttribute("year");

    var li = document.createElement("li");
    li.innerHTML = title + ", by " + author + " (" + year + ")";
    $("books").appendChild(li);
}

На странице, где я не упоминаю, это работает. Если я включу эти слова, это не сработает. Мне нужен весь этот javascript

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
   </script> 
    <script src="js/bootstrap.min.js" ></script>
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

Я не могу так много работать с javascript, извините

Answer 1

$("books") - это объект jQuery, а не HTMLElement, поэтому он не имеет методов HTMLElement, таких как appendChild. Объекты jQuery имеют $(...).append(), что подходит для вашего случая:

function showBooks(ajax) {
  var books = ajax.responseXML.getElementsByTagName("book");
  for (var i = 0; i < books.length; i++) {
    var titleNode = books[i].getElementsByTagName("title")[0];
    var authorNode = books[i].getElementsByTagName("author")[0];
    var title = titleNode.firstChild.nodeValue;
    var author = authorNode.firstChild.nodeValue;
    var year = books[i].getAttribute("year");

    var li = document.createElement("li");
    li.innerHTML = title + ", by " + author + " (" + year + ")";
    $("#books").append(li); // use jQuery append method instead of appendChild
  }
}

Или вы можете получить базовый HTMLElement и использовать appendChild на нем:

function showBooks(ajax) {
  var books = ajax.responseXML.getElementsByTagName("book");
  for (var i = 0; i < books.length; i++) {
    var titleNode = books[i].getElementsByTagName("title")[0];
    var authorNode = books[i].getElementsByTagName("author")[0];
    var title = titleNode.firstChild.nodeValue;
    var author = authorNode.firstChild.nodeValue;
    var year = books[i].getAttribute("year");

    var li = document.createElement("li");
    li.innerHTML = title + ", by " + author + " (" + year + ")";
    $("#books").get(0).appendChild(li)); // use appendChild on the HTMLElement
  }
}