Console error with append child when element doesn't exist

Question

I have the following code inside a timeout function which works fine when the element exists, but when it doesn't, it throws a console error (and is breaking something else on the page as a result)

setTimeout(function() {
  // moves #dashboard_basket_btn into #dashboard_basket
  var dashboard_basket = document.querySelector('#dashboard_basket');
  var dashboard_basket_card = document.querySelector('#dashboard_basket_btn');
  dashboard_basket.appendChild(dashboard_basket_card);
  dashboard_basket_card.classList.add('show_important');
}, 2500);

When #dashboard_basket_btn doesn't exist (it's sometimes loaded in dynamically, not always on usual page load), the part of the appendChild function where it references dashboard_basket_card says that parameter 1 is not of type: Node (guessing that means it doesn't exist?)

Is there a clever way of handing this or for it not to get upset if the element doesn't exist at the time the function runs?

What is the problem to just add an if statement? – Thallius Jun 18 '21 at 15:54 — Thallius, Jun 18 '21 at 15:54

Unmitigated · Answer 1 · 2021-06-18T15:55:16.283

0

You can use the optional chaining operator in conjunction with the logical and operator.

dashboard_basket_card 
  && 
 dashboard_basket?.appendChild(dashboard_basket_card).classList.add('show_important');

edited Jun 18 '21 at 15:55

answered Jun 18 '21 at 15:49

Unmitigated

76,500
11
62
80

score 0 · Answer 2 · answered Jun 18 '21 at 15:55

Check if it exists first?

setTimeout(function(){
    // moves #dashboard_basket_btn into #dashboard_basket
if(document.querySelector('#dashboard_basket')!=undefined &&
document.querySelector('#dashboard_basket_btn')!=undefined){
var dashboard_basket = document.querySelector('#dashboard_basket');
    var dashboard_basket_card = document.querySelector('#dashboard_basket_btn');
    dashboard_basket.appendChild(dashboard_basket_card);
    dashboard_basket_card.classList.add('show_important');
 
}
 }, 2500);

score 0 · Answer 3 · answered Jun 18 '21 at 15:57

Just put a if and check if both exist

setTimeout(function() {
  var dashboard_basket = document.querySelector('#dashboard_basket');
  var dashboard_basket_card = document.querySelector('#dashboard_basket_btn');
  if (dashboard_basket && dashboard_basket_card) {
    dashboard_basket.appendChild(dashboard_basket_card);
    dashboard_basket_card.classList.add('show_important');
  }
}, 2500);

biberman · Answer 4 · 2021-06-22T16:58:35.937

You can use an if() {} statement and simply check if the element exists. With !! (double negation) you convert a value to a boolean, for example undefined to false or an (existing) object to true.

Working example: (run the snippet to see no errormessage)

if ( !!document.querySelector('#dashboard_basket') && !!document.querySelector('#dashboard_basket_btn') ) {
  var dashboard_basket = document.querySelector('#dashboard_basket');
  var dashboard_basket_card = document.querySelector('#dashboard_basket_btn');
  dashboard_basket.appendChild(dashboard_basket_card);
  dashboard_basket_card.classList.add('show_important');
}

score 0 · Accepted Answer · answered Jun 18 '21 at 16:02

At first you can check whether the element exists or not, For example

var dashboard_basket_card_exists = document.querySelector('#dashboard_basket_btn') !== null; //the value will be true if it exists or false, if it isn't.

var dashboard_basket_exists = document.querySelector('#dashboard_basket') !== null;

After that, you can write a regular if statement, Like

if(dashboard_basket_card_exists && dashboard_basket_exists)
{
 var dashboard_basket = document.querySelector('#dashboard_basket');
 var dashboard_basket_card = document.querySelector('#dashboard_basket_btn');
 dashboard_basket.appendChild(dashboard_basket_card);
 dashboard_basket_card.classList.add('show_important');
}

This is one way to solve this issue.

score 0 · Answer 6 · answered Jun 18 '21 at 16:04

0

JavaScript: querySelector Null vs querySelector

Also following line you can try:

typeof(queried variable) === "undefined"

answered Jun 18 '21 at 16:04

Mohammad Ismail

1
3

Console error with append child when element doesn't exist

6 Answers6