When using jQuery append displays the text [Object Object] and does not insert the element

Asked

Viewed 665 times

1

I created a div.box in html and I want to insert another div that I create in the execution of the code, follow the avaixo:

HTML:

<div class="box"></div>

JS:

var item = $('<div />', {class: 'item'})
var box = $('.box')

box.on('click', function (e) {
  this.append(item)
})

But instead of showing div.item inside div.box appears the text [Object Object]. I realized that this only happens when run in the click event, doing the way below works:

var item = $('<div />', {class: 'item'})
var box = $('.box')
box.append(item)

Someone has an explanation for this?

javascript jquery dom append

  • When you use the this within the .on() error occurs, but what if you switch to box.apend(item); within the .on() the error persists?

  • 1

    This does not answer the question, but another thing one can do instead of using append is to concatenate the innerHTML of the elements with what was before + the new content - This is not the most efficient mode, but sometimes it is the simplest.

2 answers

4


When using the this you’re using an object from Javascript Puro that do not have Jquery implementations, to fix just give 1 cast on this

box.on('click', function (e) {
  $(this).append(item)
})

If you give a console.log on this and in the $(this) will see that the $(this) has several more properties than the this native.

  • Thanks man, that’s right. My silly. Your answer was chosen because it had the explanation of the cast.

3

Missed putting the this "inside" of jquery $(this), it was in your click.

I just gave a modified to see it working. 

$('document').ready(function(){
  var item = $('<div>NOVO TEXTO</div>');
  var box = $('.box');

  box.on('click', function (e) {
    $(this).append(item)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">TEXTO</div>

  • Neuber, I like your answer(+1). Just one question: Because if I click again it does not add NEW TEXT once more below?

  • 1

    I tell you true I do not know the exact reason, but if you put the variable item var item = $('<div>NOVO TEXTO</div>'); inside the click, before the append works for sure. There will kick but it can be to not put repeated object, when using the $('...') I believe that jquery creates a new "instance" for this element, and maybe it knows that it has already append with that instance. When this inside the click is always a new instance, or maybe it has absolutely nothing to do with what I said.

  • I figured that out too, just add once.

  • @Neuberoliveira what you wrote makes sense. That must be why. Anyway getting inside the block of onclick tb resolves, on the day it is necessary is quiet tb. Ex: if there were a need for the content to be passed outside this block it could be until var itemcontent = '<div>NEW TEXT</div>'; outside the onclick block and $(this). append($(itemcontent)) inside the onclick block.

  • 1

    @Antonioalexandre Only goes once pq the "new text" is in a variable and every time you click it picks the same div with the "new text" and puts in the same place if you change the code to $(this). append(item.clone()) he inserts several times...

Browser other questions tagged javascript jquery dom append

You are not signed in. Login or sign up in order to post.