How To Wrap Two Dynamic Html Elements?

I have the below jquery where i have created the dynamic html structure How to wrap the 'b' and 'ul' element with 'li'

Solution 1:

Try utilizing $.each(), .appendTo(), .append(); setting ol li , bclass to code property of data.

$(function() {
  var data = [{
    "name": "Afghanistan",
    "code": "A"
  }, {
    "name": "Bouvet Island",
    "code": "B"
  }, {
    "name": "Cook Islands",
    "code": "C"
  }];

  $.each(data, function(key, val) {
    if (!$("#aZContent ul." + val.code).is("*")) {
      // append `<li>` to `ol`
      $("<li />", {
          // set `class` to `val.code`"class": val.code,
          // set `li` `html` to `b` , `ul` , `li`"html": "<b class=" + val.code + ">" +
            val.code + "</a></b>" +
            "<ul><li>" +
            val.name + "</li></ul>"
        })
        .appendTo("#aZContent ol")
    } else {
      $("b." + val.code).each(function() {
        if (this.textContent === val.code) {
          // append `li` to `ul`
          $(this).next("ul").append("<li>" + val.name + "</li>");
        }
      })
    };
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="aZContent"><ol></ol></div>