jQuery append() поведение синтаксиса html

Question

Я учусь использовать jquery и делаю несколько тестовых страниц для практики.

В этом примере я использую jquery для привязки функции «showAddToDb()» к кнопке. Когда эта кнопка нажата, jquery должен добавить следующий код формы html в div, помеченный id "memberContent" (который я здесь оставил).

$(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, но я не уверен, зачем мне это здесь в этом конкретном дело. Кроме того, я должен также обернуть все остальные vars $() для добавления? Он работает так, как есть, но я видел несколько примеров в Интернете, которые делают это, не объясняя почему.

Answer 1

Если вы не передадите эту строку в jQuery, тогда все это строка. Обратите внимание, что в дальнейшем использовать «форму» переменную, как если бы это был объект JQuery:

form.append(formName); 

поэтому лучше быть один! Кроме того, было бы ввести новую переменную:

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

А потом:

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

Некоторые люди, как маркировка переменных, которые держат объекты JQuery, давая им имена, которые начинаются с «$». Это вопрос личных предпочтений.

Вам не нужно обертывать другие строки, потому что они передаются непосредственно API jQuery. Этот код будет знать, что с ними делать. Однако, если вы завернули их как объекты 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, .bind устарел, используйте .on. И вы можете использовать одиночную кавычку, чтобы обернуть ваши назначенные строки, чтобы вам не нужно было избегать двойных кавычек в строках.