jQuery变量作为选择器的疑问：第一种写法为何失效？

核心问题：append()方法的返回值误解 #

你第一种写法失效的根本原因是对jQuery append()方法的返回值理解错误：

let vbox = $("body").append("<div id='box'></div>");
vbox.css({
  'width': '200px',
  'height':'300px',
  'background-color':'hsl(0, 0%, 10%)',
  'border-radius':'10px',
  'position':'absolute',
  'color':'white',
  'text-align':'center'
});

jQuery的append()方法返回的是调用它的原jQuery对象，也就是这里的$("body")，所以变量vbox实际指向的是<body>元素的jQuery实例，而非你刚创建的<div id='box'>。这时候调用vbox.css()，样式会直接作用在<body>上，自然看起来整个文档都被影响了。

后两种可行写法的差异与原理 #

写法一：先创建元素再追加

var vbox = $("<div id='box'></div>")
$("body").append(vbox)
vbox.css({
  width:'200px',
  height:'300px',
  background:'hsl(0, 0%, 10%)',
  borderRadius:'10px',
  position:'absolute',
  color:'white',
  textAlign:'center'
});

这里先通过$("<div id='box'></div>")创建目标div的jQuery实例并存在vbox里，之后调用$("body").append(vbox)只是把这个元素追加到body中，vbox的指向并没有改变，依然是那个新创建的div。所以后续调用vbox.css()，样式会精准作用在目标div上。

写法二：追加后通过选择器获取元素

$("body").append("<div id='box'></div>");
var bx = $('#box')
bx.css({
  width:'200px',
  height:'300px',
  background:'hsl(0, 0%, 10%)',
  borderRadius:'10px',
  position:'absolute',
  color:'white',
  textAlign:'center'
});

这种写法是先把div追加到body，再通过id选择器$('#box')获取到这个已存在于DOM中的元素，得到它的jQuery实例后调用css()，样式自然也会作用在目标div上。缺点是如果页面存在重复id会出现选择错误，但你的场景里是自行创建的唯一id，所以可以正常使用。

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