how to append a div tag generated by jQuery dynamically with a javascript div tag element

Question

I want to append a div tag generated by jQuery dynamically with a javascript div tag element. My code looks like this:

$(".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);
});
});

The code for appending the jQuery div tag with javascript div tag should look like this: block_element.append(new_item);

But its giving error since we cannot bind since I am using javascript and jQuery in the same line. Is there any way to do it?

Starx · Accepted Answer · 2012-02-27 04:34:52Z

1

The only thing, you need to change is

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

Rest should work as it is.

edited Feb 27, 2012 at 4:34

answered Feb 27, 2012 at 4:26

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

animuson · Accepted Answer · 2012-02-27 20:55:08Z

1

What you need do is you should convert the JavaScript element to a jQuery object.

$(block_element) could convert the JavaScript element to a jQuery object;
contrarily $(block_element)[0] could convert a jQuery object to a JavaScript element.

edited Feb 27, 2012 at 20:55

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Feb 27, 2012 at 4:43

Gabry Gao

293 bronze badges

Comments

Alexandre D'Eschambeault · Accepted Answer · 2012-02-27 04:20:57Z

0

You only need to pass the element in the jQuery selector.

First solution (when you append) :

$(block_element).append(new_item);

Second solution (when you select your element)

var block_element = $("#block");

answered Feb 27, 2012 at 4:20

Alexandre D'Eschambeault

3082 silver badges7 bronze badges

1 Comment

bfavaretto Over a year ago

Second solution will break removeChild.

adeneo · Accepted Answer · 2012-02-27 05:49:31Z

0

$(".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(); });
});

answered Feb 27, 2012 at 5:49

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

how to append a div tag generated by jQuery dynamically with a javascript div tag element

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related