How to create hyperlinks inside div from within ajax response?

i would like to create one hyperlink inside mydiv for each maxnumId(ajax response) that i recive from ajax like this(each time i click loadmore button i get one maxnumId from api and i want to use that value inside hyperlink and display that hyperlink in mydiv):

<a  href="./process.php?maxnumId=123451">123451</a>
<a  href="./process.php?maxnumId=123452">123452</a>
<a  href="./process.php?maxnumId=123453">123453</a>

could any one show me how this can be done?

<script>
    var maxnumId = null;
    function callApi() {
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.somesite.com/......"),
            success: function(data) {
          maxnumId = data.pagination.next_num_id;

              if (maxnumId === undefined || maxnumId === null) 
              {

                    alert('End!');

              }
              else
              {
//here i want to used maxnumId and create hyperlink for each maxnumid 
//and place it in myDiv
         $('#myDiv').append(maxnumId);
              }
            }

        });
    }
    </script>
    <body>
    <br>
    <center>
    <div id="myDiv"></div>

    <button id="mango" onclick="callApi()">Load More</button>

    </html>


Source: ajax

1 Comment

  1. Digin Dominic

    else {
    var na = $('');
    na.attr('href', "./process.php?maxnumId=" + maxnumId);
    na.text(maxnumId);
    $('#myDiv').append(na);
    }

    EDIT:

    If you want to have each link in a separate like there are different ways to achieve that. Here are two:

    append a linebreak after each link:

    $('#myDiv').append(na).append($(''));

    make the links block elements (and possibly give them a class):

    //...
    na.addClass('myLink');
    $('#myDiv').append(na);

    and then in CSS:

    .myLink {display: block;}

    Here’s a jsfiddle DEMO. https://jsfiddle.net/samuraii/q9fo8pnr/

    Reply

Leave a Reply