Дивы из начальной загрузки не создаются встроенными

Question

Я пытаюсь сделать так, чтобы div добавлял некоторые другие div, что их класс является "картой" из начальной загрузки, и заставляет их быть созданными в линию, но когда они создаются, они показывают себя один под другим.

Я пытался отредактировать класс "карты", задав ему display: inline-block, но он не работает.

jQuery:

let newCard = document.createElement("div"); 
newCard.className = "card";
$( ".cardsContain" ).append(newCard);

CSS:

.cardsContain{
        width: 79%;
        margin-left: 9%;
        height: 100%;     
      }
      .card{
        display: inline-block;
         background-image: url('img/facebook.png');
         background-size: 100%;
         width: 100px;
         height: 100px;
      }

"cardsContain" - это div, который добавляет каждую карту.

Как мне сделать так, чтобы они отображались в одной строке?

Answer 1

Вот демонстрация, которую я создал для вас. Новая карта будет добавляться рядом друг с другом при каждом нажатии кнопки «Добавить карту».

HTML:

<button type="button" class="btn btn-primary" onclick="addCard();">Add Card</button>
<div class="cardsContain row">

Javascript:

    var i = 0;
    function addCard(){
        i++;
        let column = document.createElement("div");
        column.className = "col-3 column" + i;
        $( ".cardsContain" ).append(column);

        let newCard = document.createElement("div"); 
        newCard.className = "card";
        newCard.innerHTML = '<div class="card-body">' + '<h5 class="card-title">Card title</h5>' + '<p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>' + '</div>';
        $( ".column" + i ).append(newCard);
     }

Answer 2

Похоже, вы используете jQuery:

<div id="myDiv" class="test"> 1</div>
<button id="fooBtn">Click me</button>

jQuery:

  var fooBtn = $('#fooBtn');

  fooBtn.on('click', function() {
      let d = document.createElement("div"); 
      $(d).addClass('card')
          .html('hello, world!')
          .appendTo($("#myDiv"));        
  });

CSS:

.card{
    display: inline-block;       
    width: 100px;
    height: 100px;
}