我正在尝试使用 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 元素。如有任何建议,我们将不胜感激。
最佳答案
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);
关于jquery - 使用 .append() 在 div 中插入内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45537086/