CODEWITHSUNDEEP
javascriptjqueryhtml
heybit
heybit

Reputation: 215

JavaScript, Adding html to jQuery append function

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]

[object Object]

[object Object]

[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>");
    }
}

Upvotes: 1

Views: 72

Answers (4)

blurfus
blurfus

Reputation: 14041

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>

Upvotes: 0

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

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

Upvotes: 1

adeneo
adeneo

Reputation: 318352

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) );
    }
}

Upvotes: 0

SPlatten
SPlatten

Reputation: 5762

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.

Upvotes: 0

Related Questions