Полоса прокрутки не появляется при динамическом добавлении <li>по jquery

Question

У меня есть ul список в div, и если я задаю div height и overflow-y

, он становится прокручиваемым.

 <div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">         
     <ul id="mainul">
       <li>
          <div class="card">
            <div class="card-body">
            <p>This is the tweet frist<br>
            tweet<br>
            tweet<br> 
            test<p>
            </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card-body">
            <p>This is the tweet that's second<br>
            tweet<br>
            tweet<br> 
            test<br>
            </div>
        </div>
      </li>
   </ul>
</div>

Однако, когда я добавляю элементы по append из jquery.

$("#mainul").append(`
            <li>
            <div class="card">
            <div class="card-body">
            <p>Add this few times<br>
            tweet<br>
            tweet<br> 
            test<br>
            </div>
            </div>
            </li>`);

Полоса прокрутки никогда не появляется.

Это способ создать полосу прокрутки для динамически добавляемых <li>?

Как я должен решить это?

Answer 1

В вашем коде было несколько синтаксических ошибок.

Вам также не хватало закрывающей кавычки в $("#mainul"), хотя Микеланджело редактировал ее.

Это работает ниже.

$("#mainul").append(`
            <li>
              <div class="card">
                <div class="card-body">
                  <p>
                    Add this few times<br>
                    tweet<br>
                    tweet<br> 
                    test<br>
                  </p>
                </div>
              </div>
            </li>`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">         
     <ul id="mainul">
       <li>
          <div class="card">
            <div class="card-body">
            <p>This is the tweet frist<br>
            tweet<br>
            tweet<br> 
            test<p>
            </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card-body">
            <p>This is the tweet that's second<br>
            tweet<br>
            tweet<br> 
            test<br>
            </p>
            </div>
        </div>
      </li>
   </ul>
</div>