如何在jquery中追加变量？

Question

我有以下代码：

var golden_site = '<div id="golden_site"></div>';
$('.form_content').append(golden_site);
var lookup = '<input type="text" name="lookup" value="test">';

为什么这不起作用：

$(golden_site).append(lookup);

但是通过id访问节点可以：

$('#golden_site').append(lookup);

Answer 1

此$('#golden_site')选择id=golden_site的div。虽然此$(golden_site)没有选择任何内容。

取自here，您可以通过以下方式使用jQuery选择元素

• 按ID选择元素
• 按类名选择元素
• 按属性选择元素
• 按复合CSS选择器选择元素
• 伪选择

您尝试选择div的方式并未遵循上述方法之一。因此你没有成功。使用您创建的ID时，因为它包含在上述方式中。

<强>更新

正如Guffa在评论中指出的那样（我现在没有），

  

调用$（golden_site）并没有尝试将字符串用作选择器   所有。它将从HTML字符串创建一个元素，实际上   返回该元素

Answer 2

代码工作正常，但它并没有按照你的想法行事。

$(golden_site)部分将从字符串中的HTML代码创建新的div元素。然后，lookup元素将附加到div。由于div是您刚创建的元素，因此它不在页面中，并且您附加到其中的lookup元素也不在页面中。

如果您先创建div元素，然后将其附加到页面，而不是使用append中的字符串，那么您可以引用div元素：< / p>

var golden_site = '<div id="golden_site"></div>';
var element = $(golden_site);
$('.form_content').append(element);

现在你可以附加内容了：

element.append(lookup);

Answer 3

因为当你说

时

$(golden_site).append(lookup);

其实你的意思是：

'<div id="golden_site"></div>'

简单来说，它只是一个字符串，而不是可以附加到的jQuery对象。 golden_site 只是一个字符串。

Answer 4

原因是因为$()实际上是document.querySelector()上jQuery的包装器。因此，正如预期的那样，当您执行以下操作时，两种方法的行为应该相似：

$("#blah").append(x);

确实，浏览器正在这样做：

document.querySelector("#blah").appendChild(x);

所以这两种方法都应该像他们在这里解释的那样工作 - ＆gt; How query Selector works

正如您所看到的，作为参数传递的变量是一个将用作 CSS Selector 的字符串，他们在此解释 - ＆gt; CSS Selector List

我将添加此图片，其中包含一些从DOM中选择元素的最常用方法，请不要忘记''，W3CSchools提供。{/ p>