Почему не вставляется код в html?

Question

[Сергей Беловенцев]

html

<div class="text">
          <ul></ul>
    </div>

javascript

var input = $('input');
     var text = $('.text ul');
    const apiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=';
      var cd = '&limit=10&namespace=0&format=json&callback=?';
    form.on('submit',function(){
        let val=input.val()
        let query = apiUrl+val+cd;
        var display='';
        $.getJSON(query,function(data){
           for (var i = 0; i < 10; i++) {
            var hrf    = data[3][i];
            var p      = data[2][i];
            var title  = data[1][i]; 
            display += '<li>'; 
             display+='<h2><a href='+data[3][i]+' >'+title+'</a>';
             display+='<p>'+p+'</p>';
           display += '</li>';
          }
          alert(text.html());
          text.html(display);
          conole.log(text.html());
        });

по итогу в консоли отображается вставленный код, а в самом html ничего нет собственно вот ссылка

Comments

[Андрей Токмаков]

мб я что то не понимаю, но в кодепейне все нормально добавляется

[Сергей Беловенцев]

Андрей Токмаков: уже вопрос решен там форма отправлялась и поэтому страница перегружалась.

Answer 1

[Алексей]

Вам нужно разобраться с асинхронностью в JavaScript.
В вашем примере text.html(display); запускается после getJSON, результат которого приходит поже, поэтому переменная display пустая.

Answer 2

[smilingcheater]

А ничего, что у вас по ссылке в css'е весь контент этого ul li объявлен прозрачным (opacity: 0)? На строке 168 смотрите