JavaScript, Adding html to jQuery append function

Question

I am trying to use jQuery to add buttons on a page. I would like the buttons to appear vertical instead of horizontal. So I try

 $(".guess").append("<p>" + guess_answer + "</p>");

But then it prints to the page:

[object Object]

Instead of the buttons. I have test the code without the paragraph tags and it works but doesn't when the html is place in it.

var question1 = {
    question: "What is 4 times 1?",
    answer: "Dream On",
    possible: [1,2,3,4],
    boolean: [true,false,false,false]
};


function generate () {
    $(".question").html(question1.question);

    for (var i = 0; i < question1.possible.length; i++) {       
        var guess_answer = $('<button>');
        guess_answer.addClass("options text-center btn-group-lg");
        guess_answer.attr({
            "data-boolean" : question1.boolean[i]
        });

        guess_answer.text(question1.possible[i]);
        //guess_answer.append(question1.possible[i]);

        $(".guess").append("<p>" + guess_answer + "</p>");
    }
}

It's being converted to its toString representation because you're adding to to a string. Why not use the same mechanism to add it as a child of your new paragraph the same way you already know how to do it? — Dave Newton
– Dave Newton, Commented Oct 27, 2016 at 20:34

Mamdouh Saeed · Accepted Answer · 2016-10-27 20:40:11Z

1

Use guess_answer.prop("outerHTML") to get the element as HTML string

var question1 = {
    question: "What is 4 times 1?",
    answer: "Dream On",
    possible: [1,2,3,4],
    boolean: [true,false,false,false]
};


function generate () {
    $(".question").html(question1.question);

    for (var i = 0; i < question1.possible.length; i++) {       
        var guess_answer = $('<button>');
        guess_answer.addClass("options text-center btn-group-lg");
        guess_answer.attr({
            "data-boolean" : question1.boolean[i]
        });

        guess_answer.text(question1.possible[i]);
        //guess_answer.append(question1.possible[i]);

        $(".guess").append("<p>" + guess_answer.prop("outerHTML") + "</p>");
    }
}

answered Oct 27, 2016 at 20:40

Mamdouh Saeed

2,3251 gold badge12 silver badges11 bronze badges

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

2 Comments

heybit Over a year ago

Thank you so much.

Mamdouh Saeed Over a year ago

Glad to help you :)

SPlatten · Accepted Answer · 2016-10-27 20:34:00Z

0

Its because guess_answer as defined in your generate function contains a button object, you cannot append a HTML entity combining it with html tags using append.

If you want to add a button to the HTML, then simply write it in the append like so:

    $(".guess").append("<p><button value='123'/></p>");

However you should use the class name to append HTML content, whilst it is valid, a class might not be unique and if you add content with ID's then you may create multiple instances with the same ID which isn't valid.

answered Oct 27, 2016 at 20:34

SPlatten

5,85913 gold badges79 silver badges140 bronze badges

Comments

adeneo · Accepted Answer · 2016-10-27 20:34:21Z

0

Your variable guess_answer is an object, more specifically a jQuery object holding a DOM node.

Use DOM methods to insert it

function generate() {
    $(".question").html(question1.question);

    for (var i = 0; i < question1.possible.length; i++) {

        var guess_answer = $('<button />', {
            'class' : 'options text-center btn-group-lg',
            'data-boolean' : question1.boolean[i],
            text : question1.possible[i]
        }),
            p = $('<p />');

        $(".guess").append( p.append(guess_answer) );
    }
}

answered Oct 27, 2016 at 20:34

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

blurfus · Accepted Answer · 2016-10-27 20:40:27Z

I tried using appendTo(...) - like this

guess_answer.appendTo('.guess');

See code below:

var question1 = {
  question: "What is 4 times 1?",
  answer: "Dream On",
  possible: [1, 2, 3, 4],
  boolean: [true, false, false, false]
};


function generate() {
  $(".question").text(question1.question);

  for (var i = 0; i < question1.possible.length; i++) {
    var guess_answer = $('<button>');
    guess_answer.addClass("options text-center btn-group-lg");
    guess_answer.attr({
      "data-boolean": question1.boolean[i]
    });

    guess_answer.text(question1.possible[i]);
    //guess_answer.append(question1.possible[i]);
    var newPar = $("<p>");
    
    newPar.appendTo('.guess');                    
    guess_answer.appendTo(newPar);    
  }
}

generate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question"></div>
<div class="guess"></div>

Collectives™ on Stack Overflow

JavaScript, Adding html to jQuery append function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related