HTML DOM и Javascript: Uncaught TypeError: невозможно прочитать свойство «appendChild» неопределенного

Я написал функцию, которая очищает самые популярные статьи веб-сайта. Я выполняю две очистки: одну для изображения статьи, а другую для ссылки и названия статьи. Затем я объединяю изображение, ссылку и заголовок для каждой статьи в отдельные объекты. Отсюда моя цель - записать эту информацию в html-документ. Я создаю строку таблицы для каждой статьи. Каждая строка имеет три td: по одному для заголовка, изображения и ссылки. Ошибка, которую я получаю, показана ниже. Я поставил ** вокруг места, где появляется ошибка. Это происходит, когда я пытаюсь добавить строку своей таблицы в свою таблицу. Примечание. Это для небольшого проекта. Я не паршу веб-сайт для какой-либо личной выгоды.

VM51039:35 Uncaught TypeError: Cannot read property 'appendChild' of undefined
at <anonymous>:35:46
at Array.forEach (<anonymous>)
at m_getArticles (<anonymous>:12:15)
at <anonymous>:1:1

 var m_getArticles = function(){
      var article_nameANDlink = d3.selectAll('.grid.most-popular__grid h3>a').nodes();
      var article_img = d3.selectAll('.grid.most-popular__grid picture>img').nodes();

      var combination = [];
      for (i=0; i<article_nameANDlink.length; i++) {
        var info = new Object();
        info.nameANDlink=article_nameANDlink[i];
        info.img=article_img[i]; 
        combination.push(info); 
      }
      combination.forEach(function(d, index, arr) {
        var link = d.nameANDlink.getAttribute("href");
        console.log(link);
        var name = d.nameANDlink.innerText;
        console.log(name);
        var img = d.img.getAttribute("src");
        console.log(img);



        var header = document.createElement("p");
        var title = document.createTextNode(name);
        header.appendChild(title);

        var present = document.createElement("img");
        present.setAttribute("img",img);

        var provide = document.createElement("a");
        provide.setAttribute("a",link);
        provide.innerText="Read Article";

        var nth_article = document.createElement("TR");
        nth_article.setAttribute("id","row"+index);
        document.getElementsByTagName("table")[0].**appendChild(nth_article)**;

        var within_info = document.createElement("td");
        within_info.setAttribute("id","within_info"+index);
        document.getElementById("row"+index).appendChild(header);

        var within_img = document.createElement("td");
        within_img.setAttribute("id","within_img"+index);
        document.getElementById("row"+index).appendChild(present);

        var within_img = document.createElement("td");
        within_img.setAttribute("id","within_link"+index);
        document.getElementById("row"+index).appendChild(provide);


      })

    }

person Xenon    schedule 24.02.2019    source источник
comment
Вы уверены, что document.getElementsByTagName(table) возвращает какие-либо элементы? Ошибка говорит о том, что это не так.   -  person HaukurHaf    schedule 25.02.2019
comment
document.getElementsByTagName всегда возвращает HTMLCollection, но не гарантирует, что первый ее элемент не является неопределенным. Ознакомьтесь с этим вопросом, чтобы получить дополнительную информацию о тактике, связанной с типом ошибки TypeError, которая возникает в вашем коде.   -  person rishat    schedule 25.02.2019


Ответы (2)


Если ваш элемент таблицы уже существует, попробуйте передать его с помощью var

 var mytable = document.getElementsByTagName("table")[0];
    mytable.appendChild(nth_article);

лучший способ использовать js для создания вашей таблицы того же другого элемента

person user3378097    schedule 24.02.2019

Сохраните полученный элемент таблицы в переменной и проверьте, не определен ли он, если да, то создайте элемент таблицы.

person José Eras    schedule 24.02.2019