如何用jQuery将新增元素存入变量？控制台打印newNode为何仍是父元素？

嘿，我来帮你搞定这两个jQuery的问题～

有两种实用的方法可以实现这个需求：

• 方法一：先创建新元素的jQuery对象，再追加
  先把HTML字符串转换成jQuery对象并存在变量里，再将它追加到父元素上，这样变量就会一直指向这个新元素：

  function appendNewStage() { 
    var parent = $('.ci-journey-interactions-canvas_row'); 
    // 先把HTML字符串转为jQuery对象，存在newNode变量中
    var newNode = $(`
      <ul class="ci-journey-interactions-canvas__journey-list stage"> 
        <li> 
          <span class="ci-journey-interactions-box__droppable-element ci-droppable"></span> 
        </li> 
      </ul>
    `);
    // 将新元素追加到父元素中
    parent.append(newNode); 
    console.log(newNode.html()); // 现在能正确输出新元素的内容啦
  } 
  appendNewStage();
  

• 方法二：用appendTo()替代append()
  jQuery的appendTo()方法会返回被追加的新元素（而非父元素），所以可以直接把它存到变量里：

  function appendNewStage() { 
    var parent = $('.ci-journey-interactions-canvas_row'); 
    var newStage = `
      <ul class="ci-journey-interactions-canvas__journey-list stage"> 
        <li> 
          <span class="ci-journey-interactions-box__droppable-element ci-droppable"></span> 
        </li> 
      </ul>
    `; 
    // appendTo返回的是新创建的元素，直接赋值给newNode
    var newNode = $(newStage).appendTo(parent); 
    console.log(newNode.html()); 
  } 
  appendNewStage();
  

核心原因是jQuery的append()方法返回的是调用它的原DOM元素（也就是你的parent变量），而不是新添加的元素。

你代码里的var newNode = $(parent).append(newStage);，本质上是把parent的引用赋值给了newNode——虽然新元素已经被追加到父元素里，但newNode指向的还是父元素本身，所以console.log(newNode.html())打印的自然是父元素的内容（包含新追加的子元素，但newNode的身份还是父元素）。

解决这个问题的话，直接用上面问题1里的两种方法就行，先把新元素转成jQuery对象再操作，或者用appendTo()来获取新元素的引用。

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