Question

我正在学习使用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调用，但我不确定为什么我在这个特殊情况下需要它。另外，我是否应该用$()包裹所有其他变量用于追加？它按原样工作，但我在网上看到了一些这样做但没有解释原因的例子。

Answer 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会做正确的事情。

Answer 2

要让它发挥作用，我必须将函数的第一行从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对象，就像前两个示例一样。

Answer 3

看起来您的问题已被其他人回答。但是既然你提到你正在学习使用jQuery，那么{@ 1}}已被弃用，请使用.bind。并且您可以使用单引号来包装指定的字符串，这样您就不需要转义字符串中的双引号。

jQuery append（）html语法行为

3 个答案: