jQuery if条件为真设置visibility:hidden报错的解决方法

需要实现逻辑：当if判断条件成立时，将指定元素设置为visibility:hidden样式。
最初编写的实现代码：

if (user.privilege = 3) {
        $("#persone").css("visibility:hidden;");
}

代码执行时浏览器控制台抛出错误：

Uncaught TypeError: Cannot read properties of null (reading 'style')

其中id为persone的select元素是通过JS拼接HTML字符串动态生成的，对应生成代码如下：

var html = '<div class= "col-lg-6">'+
           '<label class="mt-15">A chi è riferito l\'evento? </label>' +
                 '<select class="form-control" id="persone" >' +
                    _this.GetOptionPersone() +
                 '</select >' +
           '</div>' ;

代码共有3处错误，逐一修复即可正常运行：

• 条件判断语法错误：判断值相等需要使用===严格相等运算符，原有代码里的user.privilege = 3是赋值操作，会直接把user.privilege的值修改为3，完全不符合判断逻辑。
• jQuery样式设置语法错误：jQuery的.css()方法设置样式时，合法写法为传入「属性名、属性值」两个参数，或是传入包含样式键值对的对象，直接传入"visibility:hidden;"属于参数格式错误，正确写法为.css("visibility", "hidden")。
• 触发控制台报错的核心原因：执行样式设置代码时，你拼接生成的HTML字符串还没有插入到页面DOM树中，$("#persone")选择器无法找到尚未渲染的元素，返回null后再操作style属性就会抛出类型错误。必须等拼接完成的HTML通过.append()/.html()/insertAfter()等方法插入到页面DOM之后，再执行元素选择和样式设置逻辑。

参考修复代码 #

方案1：等DOM插入完成后再操作元素

// 先将拼接好的动态HTML插入到页面指定位置，示例为插入到id为formWrap的容器内部
$("#formWrap").html(html);
// DOM渲染完成后再执行判断和样式设置
if (user.privilege === 3) {
  $("#persone").css("visibility", "hidden");
}

方案2：拼接HTML时直接写入样式，省去后续DOM操作

// 提前判断权限，拼接select标签时直接加上对应样式
const personeStyle = user.privilege === 3 ? 'style="visibility: hidden"' : '';
var html = '<div class= "col-lg-6">'+
           '<label class="mt-15">A chi è riferito l\'evento? </label>' +
                 '<select class="form-control" id="persone" ' + personeStyle + '>' +
                    _this.GetOptionPersone() +
                 '</select >' +
           '</div>' ;
// 后续直接把html插入页面即可，不需要额外操作元素样式

内容的提问来源于stack exchange，提问作者Filippo Canino