Mount HTML out of jQuery

Question

I’m having a hard time putting HTML together outside jQuery.

$(document).ready(function() {
    $.ajax({
        url : "listAllForum",
        dataType : 'json',
        success : function(data) {
            $.each(data, function(index, objeto) {
                $('#post-forum').last().append('<div class="jumbotron">' +
                        ' <strong>Nome do usuário que postou a mensagem!!!</strong> - '+
                        ' Data: <br>' + 
                        ' <input type="hidden" id="idForum" value="'+ objeto.idForum +'" />' + 
                          objeto.message + '<br> <br>' + 
                        ' <input type="text" size="90" placeholder="Redigir uma resposta" id="answerTXT" /> <br> <br>' + 
                        ' <a href="javascript:answer()" id="answer" >Responder</a></div>');
                });
        }
    });

I tried that, but it didn’t work

$(document).ready(function() {
    $.ajax({
        type:'post',        //Definimos o método HTTP usado
        dataType: 'json',   //Definimos o tipo de retorno
        url: 'listAllForum',//Definindo o arquivo onde serão buscados os dados
        success: function(dados){
            for(var i = 0; dados.length > i; i++){
                //Adicionando registros retornados na div
                $('#post-forum').last().append('<a href="#" id="answer">Responder</a><br>');
            }
        }

    });

    $('#answer').on('click', function(event) {
        adicionaItem(1);
        event.preventDefault();
    });
});