使用appendto将带有表单的div附加到现有div

时间:2012-06-26 20:35:38

标签: jquery

当我尝试使用

将一些文本附加到现有div时,我运气不错
$("<div class='form-holder'>Append a form here</div>").appendTo('.container');

但是当我尝试

时,一切都从那里向南
$(document).ready
(
function()
{
//$("<div class='form-holder'>Append a form here</div>").appendTo('.container');
$("<div class='form-holder'>"
"<form name="input" action="#" method="get">"
"<label>Slider Title:</label> <input type="text" name="slider_title" /><br/><br/>"
"<label>Slider Description:</label> <input type="text" name="slider_description" /><br/><br/>"
"<input type="submit" value="New Slider" />"
"<input type="submit" value="Update Slider" />"
"</form>"
"</div>").appendTo('.container');
}
);

你可以在这里看到小提琴http://jsfiddle.net/F7YAe/

4 个答案:

答案 0 :(得分:3)

尝试将"替换为'并使用字符串连接运算符+

注意我的代码是如何正确着色的,而不是你的代码。您不能在JS中使用相同类型的引号和JS中的HTML。

        $("<div class='form-holder'>" +
        "<form name='input' action='#' method='get'>" +
        "<label>Slider Title:</label> <input type='text' name='slider_title' /><br/><br/>" +
        "<label>Slider Description:</label> <input type='text' name='slider_description' /><br/><br/>" +
        "<input type='submit' value='New Slider' />" +
        "<input type='submit' value='Update Slider' />" +
        "</form>" +
        "</div>").appendTo('.container');

答案 1 :(得分:2)

您的问题是您没有编写正确的JavaScript。您正在拆分字符串而不在行之间使用+。结合混合单引号和双引号,然后遇到重大问题。

$('<div class="form-holder">'+
'<form name="input" action="#" method="get">'+
'<label>Slider Title:</label> <input type="text" name="slider_title" /><br/><br/>'+
'<label>Slider Description:</label> <input type="text" name="slider_description" /><br/><br/>'+
'<input type="submit" value="New Slider" />'+
'<input type="submit" value="Update Slider" />'+
'</form>'+
'</div>').appendTo('.container');

http://jsfiddle.net/F7YAe/9/

答案 2 :(得分:1)

你的字符串有问题需要转义引号和+用于连接或用单行写字符串。

答案 3 :(得分:1)

这是一个有效的例子!

http://jsfiddle.net/F7YAe/10/

$(document).ready(

function() {
    //$("<div class='form-holder'>Append a form here</div>").appendTo('.container');
    $("<div class='form-holder'><form name='input' action='#' method='get'><label>Slider Title:</label> <input type='text' name='slider_title' /><br/><br/><label>Slider Description:</label> <input type='text' name='slider_description'/><br/><br/><input type='submit' value='New Slider' /><input type='submit' value='Update Slider' /></form></div>").appendTo('.container');
});​