1

这是我的表格，不知道我是否已正确设置它以与 AJAX 一起使用......

<form id="form" method="post">
<input id="cloudName" name="cloudName" type="text" placeholder="Enter cloud name">
<input id="cloudFamily" name="cloudFamily" type="text" placeholder="Enter cloud family">
<button id="add" type="submit" name="add">Add</button>
</form>

我基本上想知道如何使用 class="cloud" 创建一个 div，并将第一个输入项“cloudName”放在 div 的第一个 p 标签中，并将“cloudFamily”放在我们创建的 div 的第二个 p 标签中我们按下添加按钮...希望有一个脚本可以让我们也不断添加 div。任何帮助表示赞赏。我在网上搜索了使用 AJAX 添加 div，但没有任何效果，可能是因为我在页面的其他地方进行了其他 ajax 调用？不知道会不会影响

4

3 回答 3

2

假设您能够使 jQuery 正常工作，下面是一个应该对您有用的示例。请注意，这假设您有一个名为cloudcontainer的容器（用于放置新的 div）：

<div class="cloudcontainer"></div>

Javascript 看起来像这样：

$('.cloundcontainer').append('<div class="cloud"><p>'+$('#cloudName').val()+'</p><p>'+$('#cloudFamily').val()+'</p></div>');

生成的 HTML 如下所示：

<div class="cloundcontainer">
    <div class="cloud">
        <p>...</p>
        <p>...</p>
    </div>
</div>

我在此链接上准备了一个有效的 JSFIDDLE 示例：示例

于 2012-09-14T19:55:45.667 回答
1

尝试这个：

$('<div/>', {
    'class': 'cloud',
    html: '<p></p><p></p>'
}).prependTo('form');    


$('.cloud p').each(function(i,v){
    $(this).append($('form input').eq(i))
})

http://jsfiddle.net/Wb8TZ/ ​</p>

于 2012-09-14T19:41:57.153 回答
1

您的 AJAX 回调看起来像这样：

success: function(data) {
   $('<div class="cloud">'); // Creates the holder div
   $('<p class="cloudname">').html(data.cloudname).appendTo('.cloud'); // Create the cloud name p element and attach to cloud placeholder
   $('<p>').html(data.cloudfamily).appendTo(".cloudname"); // Do the same for the cloudfamily
}
于 2012-09-14T19:42:16.290 回答