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附加到DOM，而是使用jQuery变量将元素附加到该div。任何建议都表示赞赏。

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);

Answer 2

因为append不会返回对附加内容的引用。它指的是第一个附加后的同一个对象，即results，或者无论你要运行多少个附加项。因此，请尝试使用.appendTo()

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

使用.append（）在div中插入内容

2 个答案: