构建嵌套jQuery对象返回后，如何向内部.third元素追加新元素？

嘿，看了你的代码，其实本身逻辑是没问题的——你搭的结构是first > second > third，返回的first jQuery对象确实包含third元素，理论上obj.find('.third')肯定能定位到它。没生效大概率是踩了这几个小坑，对应解决办法给你列出来：

1. 别把jQuery对象当成原生DOM节点来用 #

如果你是这么调用的：

var obj = build()[0]; // 直接取了原生DOM元素
obj.find('.third').append('新内容'); // 无效，原生DOM没有find方法

赶紧改回来，要操作jQuery对象：

var obj = build(); // 直接保存返回的jQuery对象
obj.find('.third').append('<span>我是新元素</span>'); // 正常生效

要是真的拿到了原生DOM节点，记得用$()把它包装成jQuery对象再操作：

var domNode = build()[0];
$(domNode).find('.third').append('<span>新元素</span>');

2. 别忘了把构建好的对象挂载到页面DOM中 #

如果你只是在内存里拼好了元素结构，但没把它添加到页面中，就算你给third追加了元素，页面上也看不到效果。这时候得先把obj插入到页面里：

var obj = build();
obj.find('.third').append('<span>终于能看到我啦</span>');
$('body').append(obj); // 挂载到页面后，新元素就会显示出来

3. 嫌find麻烦？直接存元素引用更靠谱 #

要是怕选择器出问题（比如页面里有重名的.third元素），可以修改build函数，直接把需要后续操作的元素返回出来，用起来更精准省心：

function build(){ 
  var first = $('<div/>', { class: 'first' }); 
  var second = $('<div/>', { class: 'second' }); 
  var third = $('<div/>', { class: 'third' }); 
  second.append(third); 
  first.append(second); 
  // 返回包含关键元素的对象，方便后续直接引用
  return {
    wrapper: first,
    thirdBox: third
  }; 
}

// 调用时直接操作thirdBox
var myElements = build();
myElements.thirdBox.append('<span>精准操作，绝不翻车</span>');
$('body').append(myElements.wrapper);

我刚才本地测试了你的原始代码，直接用build()返回的对象调用find('.third')是完全能生效的，所以先排查前两个情况，应该就能解决问题啦！

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