标签: jquery-append

如何div在jQuery中创建元素？

我的代码看起来像这样:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

我想使用jQuery将以下内容添加到列表中:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

我试过这个:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

但是这会在最后一个li 内部li(在结束标记之前)添加新内容,而不是在它之后.添加此功能的最佳方法是li什么？

我有两种方法可以创建一个<div>使用jQuery.

或者:

var div = $("<div></div>");
$("#box").append(div);

要么:

$("#box").append("<div></div>");

使用除可重用性之外的第二种方式有什么缺点？

我正在使用以下代码测试jQuery的.append()vs .appendTo()方法:

$('div/>', {
    id : id,
    text : $(this).text()
    }).appendTo('div[type|="item"]#'+id);
$('div[type|="item"]#'+id).append($(this).text());

请注意,选择器在.appendTo()和中是相同的.append(),但后者工作(在同一页面内),而前者不工作.为什么？

如何.appendTo()使用这种类型的(复杂)选择器？这两种方法的插值方式不同吗？我缺少一些语法吗？

我不想用无效的代码来混淆帖子:足以说明选择器引用的元素存在,正如.append()产生所需结果的方法所证明的那样.如果需要更多信息,请与我们联系.

谢谢!

嗨,我试图根据输入附加选项来选择标签.但选项不附加.我甚至没有得到错误,所以故障无法理解.

HTML

  <div class="col-lg-5">
      <div class="input-group">
          <label>Select type of Graph</label>    
          <select data-placeholder="Select Field..." id="graph_name" style="width:300px;" name="team_name" class="chosen-select" tabindex="2">

          </select>
      </div>
  </div>

jQuery的:

$('#field_name').change(function() {
  var fieldname = $('#field_name option:selected').val();
  $.post('<?php echo BASE_URL . 'php/processing/formDashboard/graph/showPossibleGraphs.php?id=' . $_GET['id']; ?>', {fieldname: fieldname}, function(data) {
    $.each(data.graphs, function(index, value) {
      $.each(value, function(index, value) {
        console.log(value.id);
        console.log(value.text);
        var option = '<option value="'+value.id+'">'+value.text+'</option>';
        $('#graph_name').append(option);
      });
    });
  });
});

这是截图

这是我从一个下拉列表中选择选项时的图像,数据来自JSON格式的脚本

这是firebug调试截图,显示数据被追加,但点击它没有显示任何内容我的样本数据是这样的:

sample data: {
  "status":"OK",
  "response":200,
  "graphs":[[
    {"id":"B","text":"Bar Chart"},
    {"id":"D","text":"Doughnut Chart"},
    {"id":"P","text":"Pie Chart"}
  ]]
}

我有一些像这样的jQuery代码:

$("#add").click(function(event){
    $("#list").append('<a class="remove" href="#">x</a>');

    return false;
});

$('.remove').live('click', function(){
    alert("123");
});

如果单击class = remove,我希望它提醒123.但这不会发生.我认为这是一个简单的想法,但我必须遗漏一些东西.

有任何想法吗？

谢谢.

下面是我的代码.

$("<table/>",{"cellspacing":"0","cellpadding":"0","border":"0","width":"100%"})
.append(
$("<tbody/>")
.append(function(){

    options=["ONE","TWO","THREE","FOUR"];
    $.each(options, function(val) {
        return ($("<tr/>")
        .append(
            $("<td/>").html("4/6/2013 10:41"),
            $("<td/>").html("5/6/2013 10:42"),
            $("<td/>").html(val),
            $("<td/>").html("<img src='pdf_16x16.png'/>"),
            $("<td/>").html("<a href='#'>Re-Upload Documents</a>")
        ));
    })

})
).appendTo("body");

fornd中的for循环不起作用.

我想使用jQuery append函数无限地将一些html元素从一个容器移动到另一个容器,但是当我点击已经附加的元素时,click事件不会再触发.

基于类似于我的一些线程,我发现附加的元素被剥离了它们的事件监听器.我怎么能避免这种情况,有人可以展示解决方案吗？

这是: 小提琴

    $('section.container-A div.elem').click(function() {
        $('section.container-B').append(this) ;
    }) ;

    $('section.container-B div.elem').click(function() {
        $('section.container-A').append(this) ;
    }) ;

我有两个组合框,当另一个组合框数据被更改时,我需要填充相同的信息.

但是,当我使用.append()方法时,很明显它只执行最新的追加调用.这是代码:

    $('.sc-days').change(function () {
        var scedo = $('.sc-edo');
        var sclpo = $('.sc-lpo');
        var selected = $(".sc-days option:selected");
        scedo.append(selected);
        sclpo.append(selected);
    });

运行此选项时,只会填充"sclpo".你可以在这里看到结果.http://jsfiddle.net/DF42s/

嗨我通过jquery将列追加到一行.我有一排看起来像这样

<form action="certifications.php?action=addnew_save" method="post">
<tr id="add_new_<?php echo($v_id);?>" valign="top" bgcolor="#EEEEEE"></tr>
</form>

现在我正在做什么,我在<td>这一行附加一些.我的javascript函数看起来像这样

var sr=document.getElementById('hidden_'+vid).value;
var append='';
    append+='<td width="40" align="center">'+sr+'</td>';
    append+='<input type="hidden" value="'+vid+'">';
    append+='<td width="200" align="center"><input type="text" name="short_name" size="25" autocomplete="off" value="" /></td>';
    append+='<td width="200" align="center"><input type="text" name="full_name" size="25" autocomplete="off" value="" /></td>';
    append+='<td width="80" align="center"></td>';
    append+='<td width="80" align="center"><input type="checkbox" name="feature" /></td>';
    append+='<td width="80" align="center"><input type="text" name="order" size="2" value="" /></td>';
    append+='<td width="80" align="center"><input type="checkbox" name="hidden" /></td>';
    append+='<td width="80" align="center"></td>';
    append+='<td width="50" class="style3" align="center"></td>';
    append+='<td width="50" class="style3" align="center"><INPUT TYPE="submit"  VALUE="Submit" NAME="Submit"></td>';
    append+='<td width="50" …

我有以下ajax调用来调用webservice并检索json数据

$(document).ready(function () {
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: "Test.asmx/GetImages",
                success: function (msg) {
                    //var data = JSON.parse(msg); 
                    alert(msg.d);
                   $.each(msg.results, function (i, tweet) {
                        alert(msg.d);
                        $("#imagelist").append('<p><img src="' + tweet + '" />' + tweet + '</p>');
                    });
                }
            });
 });

我跟随从ajax调用获得的json结果,我发现难以附加img源代码.

{"d":"[\r\n  {\r\n    \"imagepath\": \"images/01.jpg\"\r\n  },\r\n  {\r\n    \"imagepath\": \"images/02.jpg\"\r\n  },\r\n  {\r\n    \"imagepath\": \"images/03.jpg\"\r\n  },\r\n  {\r\n    \"imagepath\": \"images/04.jpg\"\r\n  }\r\n]"}

我有用户可以添加日期范围,以及价格的页面.默认情况下有三个,但用户可以使用添加日期范围按钮按钮添加更多范围.我的问题是,在我获得$_POST值后添加一些额外的日期范围后,它没有显示附加的html元素的帖子值.

javascript部分

var n = 0;
$(document).ready(function () {

    $("#btn2").click(function () {
        $("#add_drange").append(" <p><input type='text' name='from" + n + "' class='datepicker' placeholder='From' />&nbsp;&nbsp;<input type='text' name='to" + n + "' class='datepicker' placeholder='To' />&nbsp;&nbsp;<input type='text'  name='price" + n + "'id='price' placeholder='Price in USD' /></p>");

        n = n + $("#add_drange").length;
        //c = c + n;
        //alert(n);
        if (n == 25) {
            alert('You can only add 25 Date Ranges');
            event.preventDefault();
            $("#btn2").hide();
        }
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        }).val();
    });
});                                           

HTML

<div id="add_drange">
    <br> …