Добавление div с CSS в DOM

Question

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

Я пробовал .createElement (), который создает новый элемент списка, но не включает CSS.Я начинаю думать, что полностью ошибаюсь в этом.Если вам нужна дополнительная информация или код, дайте мне знать.

\\HTML

<div id="boxhold">
 <ul>
  <li>
   <div class="twogrid">
    <h1>Fruit Juice</h1>
    <p>50</p>
   </div>
  </li>
 </ul>
</div>

\\CSS

#boxhold {
margin: 0 auto;
ul {
    list-style-type: none;
    padding: 0;
    li {
        margin: 0 auto;
        width: 408px;
        height: 75px;
        border: 3px solid $prime-color;
        h1 {
            font-family: $header-font;
            font-weight: $header-weight;
            font-size: 1em;
        }
        p {
            font-family: $header-font;
            font-weight: $header-weight;
        }
    }
  }
}

\\JS
//Get Data

//Empty array for storing
var added = [];

//Get Data
var userInput = function() {
    return {
        name: document.getElementById('name').value,
        amount: document.getElementById('amount').value
    }    
};


// Store Data
var newSugar = function(){
    return added.push(userInput());
}

// New HTML
function newBox() {
    var newLi = document.createElement('li');

    var newName = document.getElementById('name').value;
    var n = document.createTextNode(newName);
    newLi.appendChild(n);

    var newAmount = document.getElementById('amount').value;
    var a = document.createTextNode(newAmount);
    newLi.appendChild(a);

    var boxhold = document.getElementById('boxhold').getElementsByTagName('ul')[0];

    document.body.appendChild(newLi);    
};

//Adding stuff

 var displayData = (function() {

    var addInput = function() {
        var data = userInput();
        var item = newSugar();
        var box = newBox();
        //var box = newItem();
    };


    var addFood = document.getElementById('addFood');
    addFood.addEventListener('click', addInput);

    document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                addInput();
            }
        });    
})(userInput, newSugar, newBox);

Answer 1

Добро пожаловать в переполнение стека @nzart ?

Похоже, что вы добавляете вновь созданный элемент списка в тело документа, что означает, что он будет добавлен как последний элемент страницы. Ваш CSS указывает, что стили применяются только к элементам списка внутри неупорядоченного списка, поэтому это объясняет отсутствие стилей.

Простое исправление должно заменить document.body.appendChild(newLi); на boxhold.appendChild(newLi);. Надеюсь, это поможет!