Question

我想用javascript div标签元素动态添加jQuery生成的div标签。我的代码如下所示：

$(".remove_item").click(function(){
  $(this).hide("fast", function(){
  var id = $(this).parent().attr("id");
  var remove_item_id = document.getElementById(id);
  var block_element = document.getElementById("block");

  block_element.removeChild(remove_item_id);

  new_item = $("<div/>");
  new_item.attr("id", "item");
  new_item.attr("name", "item");
  new_item.addClass("div_image");
  new_item.append($("<img/>")
  .addClass("image")
  .attr("src", "/compare/sites/default/files/add_item.jpg")
  .attr("height", 50)
  .attr("width", 50));

  new_item.append($("<span/>")
  .addClass("new_item")
  .click(function(){
  $(this).parent().remove();
  }));

  block_element.append(new_item);
});
});

使用javascript div标签附加jQuery div标记的代码应如下所示： block_element.append（NEW_ITEM）;

但由于我在同一行使用javascript和jQuery，因此我们无法绑定它的错误。有没有办法做到这一点？

Answer 1

唯一需要改变的是

var block_element = $("#block");
$("#"+remove_item_id).remove();

休息应该按原样运作。

Answer 2

您需要做的是将JavaScript元素转换为jQuery对象。

$(block_element)可以将JavaScript元素转换为jQuery对象;
相反$(block_element)[0]可以将jQuery对象转换为JavaScript元素。

Answer 3

您只需要传递jQuery选择器中的元素。

第一个解决方案（当你追加时）：

$(block_element).append(new_item);

第二种解决方案（当你选择你的元素时）

var block_element = $("#block");

Answer 4

$(".remove_item").click(function(){
    $(this).hide("fast", function(){
        var elm = $("#block"),
            parent = $(this).parent(),
            img = $('<img src="/compare/sites/default/files/add_item.jpg" class="image" height="50px" width="50px" />'),
            span = $('<span class="new_item"></span>'),
            new_item = $('<div id="item" name="item" class="div_image"></div>').append(img).append(span);

        elm.remove(parent).append(new_item).on('click', function(){ $(this).parent().remove(); });
});

如何使用javascript div标签元素动态附加jQuery生成的div标签

4 个答案: