当元素不存在时附加子项的控制台错误

Question

我在一个超时函数中有以下代码，当元素存在时它工作正常，但当它不存在时，它会抛出一个控制台错误（并因此破坏页面上的其他内容）

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);

当#dashboard_basket_btn 不存在时（它有时是动态加载的，并不总是在通常的页面加载中），appendChild 函数中引用 dashboard_basket_card 的部分表示参数 1 是不是类型：节点（猜测这意味着它不存在？）

如果函数运行时元素不存在，是否有一种聪明的方法来处理这个问题或让它不生气？

Answer 1

您可以将可选的链接运算符与逻辑与运算符结合使用。

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

Answer 2

先检查是否存在？

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);

Answer 3

只需输入一个 if 并检查两者是否存在

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);

Answer 4

您可以使用 if() {} 语句并简单地检查元素是否存在。使用 !!（双重否定）可以将值转换为布尔值，例如将 undefined 转换为 false 或将（现有的）object 转换为 true。

工作示例：（运行看不到错误消息的片段）

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');
}

Answer 5

首先可以判断元素是否存在，例如

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;

之后可以写一个正则的if语句，赞

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');
}

这是解决此问题的一种方法。

Answer 6

JavaScript: querySelector Null vs querySelector

您也可以尝试以下行：

typeof(queried variable) === "undefined"

当元素不存在时附加子项的控制台错误

Console error with append child when element doesn't exist

javascript

appendchild