Блог

Главная - Вопросы по программированию - Невозможно добавить div после вызова Axios

Невозможно добавить div после вызова Axios

#javascript #api #axios

#javascript #API #axios

Вопрос:

Я просмотрел предыдущие вопросы, заданные на этом форуме, и не нашел ничего, что имело бы отношение к этой конкретной ситуации. Я пытаюсь создать карточку пользователя из данных, которые я извлекаю из Github. Когда я пытаюсь добавить первый дочерний div к родительскому div, который существует в HTML, мой код выдает следующую ошибку «TypeError: не удалось выполнить ‘appendChild’ на’Node’: параметр 1 не имеет типа’Node'». Проблема в том, что это определенно узел. Вот мой код.

     //Axios call
    const info = axios.get(url).then(({ data }) => createCard(data));

    function createCard(gitHubData) {
  const cards = document.querySelector(".cards");

  //Creating the elements for the cards
  const card = document.createElement("div").classList.add("card");
  var img = document.createElement("img");
  const info = document.createElement("div").classList.add("card-info");
  var name = document.createElement("h3").classList.add("name");
  var username = document.createElement("p").classList.add("username");
  var location = document.createElement("p");
  var profile = document.createElement("p");
  var followers = document.createElement("p");
  var following = document.createElement("p");
  var bio = document.createElement("p");

  //Creating the nested layout of our elements
  cards.appendChild(card);  //code fails here
  card.appendChild(img);
  card.appendChild(info);
  info.appendChild(name);
  info.appendChild(username);
  info.appendChild(location);
  info.appendChild(profile);
  info.appendChild(followers);
  info.appendChild(following);
  info.appendChild(bio);

  //Assigning the cards to info collected from axios
  img.src = gitHubData.avatar_url;
  console.log(img.src);
  name = gitHubData.name; //If I use .innerHTML or .textContent returns 
                          //undefined
  console.log(name);
  username = gitHubData.login;
  location = gitHubData.location;
  profile = `Profile: ${gitHubData.html_url}`;
  followers = gitHubData.followers;
  following = gitHubData.following;
  bio = gitHubData.bio;

  return cards;
}

Комментарии:

1. вы подтвердили, что значение const cards = document.querySelector(".cards"); равно нулю или нет? если оно равно null, вам нужно его обработать

2. Вы пытались добавить дочерний элемент самого низкого уровня в cards?

3. Да, cards является div и имеет класс header

Ответ №1:

Я до сих пор не уверен, почему мой код не удался в первую очередь, но я выключил компьютер на ночь и попробовал еще раз утром. Правильный код (который я безуспешно пробовал раньше, был следующим:

 name.textContent = gitHubData.name;
username.textContent = gitHubData.login;
location.textContent = gitHubData.location;
profile.textContent = `Profile: ${gitHubData.html_url}`;
followers.textContent = gitHubData.followers;
following.textContent = gitHubData.following;
bio.textContent = gitHubData.bio;