jQuery append() html 语法行为答案

【问题标题】：jQuery append() html syntax behaviorjQuery append() html 语法行为
【发布时间】：2013-07-15 03:02:28
【问题描述】：

我正在学习使用 jquery，并且正在制作一些测试页面以供练习。

在本例中，我使用 jquery 将函数“showAddToDb()”绑定到按钮。当按下该按钮时，jquery 应该将以下 html 表单代码附加到由 id“memberContent”标记的 div 中（我在这里省略了）。

 $(document).ready(function() {
        $('#addToDb').bind('click',showAddToDb);
 });
 function showAddToDb() {
        var form = $("<div></div>");
        var formName = "<div class=\"formRow\"><label for=\"name\">Name: </label><input class=\"nameInput\" type=\"text\" name=\"name\"/></div>";
        var formLocation = "<div class=\"formRow\"><label for=\"location\">Location: </label><input class=\"locationInput\" type=\"text\" name=\"location\"/></div>";
        var formDes = "<div class=\"formRow\"><label for=\"description\">Description: </label><textarea class=\"descriptionInput\" name=\"description\" rows=\"10\" maxlength=\"1000\"></textarea></div>";
        var formPrice = "<div class=\"formRow\"><label for=\"price\">Price: </label><input class=\"priceInput\" type=\"text\" name=\"price\"/></div>";
        var formSubmit = "<div class=\"formRow\"><button onclick=\"addToDb()\">Submit</button></div>";
        form.append(formName);
        form.append(formLocation);
        form.append(formDes);
        form.append(formPrice);
        form.append(formSubmit);
        $('#memberContent').append(form);
    }

上面的代码有效，但我努力让它工作，我的问题是它为什么有效。为了让它工作，我不得不将函数的第一行从 var form = "<div></div>"; 更改为 var form = $("<div></div>");

我知道美元符号代表 jquery 调用，但我不确定为什么在这种特殊情况下需要它。另外，我是否也应该用$() 包装所有其他变量以进行附加？它按原样工作，但我在网上看到了一些例子，没有解释原因。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果你不将该字符串传递给 jQuery，那么它就是一个字符串。请注意，稍后您将使用“form”变量，就好像它是一个 jQuery 对象：

form.append(formName);

所以最好是一个！你也可以引入一个新变量：

var $form = $(form); // assuming "form" was a plain string

然后：

$form.append(formName);
// etc, with "$form" instead of "form"

有些人喜欢通过给它们命名以“$”开头的名称来标记保存 jQuery 对象的变量。这是个人喜好问题。

您不必包装其他字符串，因为它们被直接移交给 jQuery API。该代码将知道如何处理它们。但是，如果您确实将它们包装为 jQuery 对象，那么这也可以，因为 jQuery 会做正确的事情。

【讨论】：

【解决方案2】：

您的问题似乎已被其他人回答。但既然你提到你正在学习使用 jQuery，.bind 已被弃用，请使用.on。并且您可以使用单引号来包装您分配的字符串，这样您就不需要转义字符串中的双引号。

【讨论】：

啊，我明白了。以后我不会再使用bind了。另外，感谢有关双引号的提示。一个个逃出来真是太痛苦了，哈哈。

【解决方案3】：

为了让它工作，我不得不将函数的第一行从 var form = "<div></div>"; 更改为 var form = $("<div></div>");

因为您尝试在第一个代码中的字符串上使用append，所以这将不起作用，因为该函数需要一个 DOM 对象。当您使用这个$("<div></div>"); 时，您正在将一个字符串转换为一个DOM 对象，从而使append() 函数调用有效。如果您使用纯 javascript 将字符串转换为 DOM 对象，则需要 createElement() 函数。

这是普通的javascript

var form = document.creatElement('div') // works

这是你已经知道的 jQuery

var form = $('<div></div>'); // works

这不适用于任何 DOM 对象函数

 var form = "<div></div>"; // won't work with .append()

前两个创建一个 DOM div 对象，这与 var form = "<div></div>"; 不同，后者只创建一个 javascript 字符串。如果你想使用 DOM 对象函数，例如append() 你需要像前两个例子一样把你的 javascript 变量变成一个 DOM 对象。

【讨论】：