jquery - 使用 .append() 在 div 中插入内容

Question

我正在尝试使用 jQuery 变量将内容插入到 div 中。

我想要得到的是这个。

<div class="results">
  <div class="user-div">
     <p>Hello world</p>
  </div>
</div>

但是它呈现为:

<div class="results">
  <div class="user-div"></div>'
  <p>Hello world</p>
</div>

以下似乎是正确的语法。从技术上讲，如果我使用 $('.user-div).append() 但我尝试使用 jQuery 变量，它就可以工作。

var $results = $('.results');
var $userDiv = $results.append('<div class="user-div"></div>')
$userDiv.append('<p>Hello world</p>');

在这种情况下，问题不在于将 div append 到 DOM，而是使用 jQuery 变量向该 div append 元素。如有任何建议，我们将不胜感激。

Answer 1

var $results = $('.results');
var $userDiv = $('<div class="user-div"></div>').append('<p>Hello world</p>');
$results.append($userDiv);

您还可以使用第一个选择器提供的上下文来选择子节点:

var $results = $('.results');
$results.append( $('<div class="user-div"></div>');
var $userDiv = $('.user-div', $results); // We select children from the context provided by $results
$userDiv.append('<p>Hello world</p>');

请记住，$()(或更具体地说，jQuery())会选择 DOM 中已有的元素(如果它们不存在，则创建它们)。实际处理 jQuery 对象比单独处理 HTML 更好。从长远来看，使其更具可读性且易于引用。

最后，我会做这样的事情(更容易理解):

var $results = $('.results');
var $userDiv = $('<div class="user-div"></div>');
var $text    = $('<p>Hello world</p>');
$userDiv.append($text);
$results.append($userDiv);