Javascript 向DOM添加带有CSS的div

对于一个项目，我正在构建一个获取用户输入、将其存储在数组中并在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);

\\HTML


果汁
五十



\\CSS
#箱包{
保证金：0自动；
保险商实验室{
列表样式类型：无；
填充：0；
李{
保证金：0自动；
宽度：408px；
高度：75px；
边框：3倍纯色$prime颜色；
h1{
字体系列：$header字体；
字体重量：$header-weight；
字号：1em；
}
p{
字体系列：$header字体；
字体重量：$header-weight；
}
}
}
}
\\JS
//获取数据
//用于存储的空数组
增值=[]；
//获取数据
var userInput=function（）{
返回{
名称：document.getElementById（'name'）。值，
金额：document.getElementById（'amount'）。值
}    
};
//存储数据
var newSugar=函数（）{
返回added.push（userInput（））；
}
//新HTML
函数newBox（）{
var newLi=document.createElement（'li'）；
var newName=document.getElementById（'name'）。值；
var n=document.createTextNode（newName）；
newLi.appendChild（n）；
var newAmount=document.getElementById（'amount'）。值；
var a=document.createTextNode（newAmount）；
newLi.儿童（a）；
var-boxhold=document.getElementById（'boxhold'）.getElementsByTagName（'ul'）[0]；
文件.正文.附件（newLi）；
};
//添加内容
var displayData=（函数（）{
var addInput=函数（）{
var data=userInput（）；
var item=newSugar（）；
var-box=newBox（）；
//var-box=newItem（）；
};
var addFood=document.getElementById（'addFood'）；
addFood.addEventListener（'click'，addInput'）；
document.addEventListener（'keypress'，函数（事件）{
if（event.keyCode==13 | | event.which==13）{
addInput（）；
}
});    
})（用户输入，newSugar，newBox）；

欢迎来到Stack Overflow@nzart分享您目前在javascript方面的经验？还有，你在使用css的预处理器吗？哦，是的，我在使用Sass。我将继续在我的帖子中添加其余的JS。那个CSS是什么预处理器？更少？、SCSS、，。。。？如果它不是普通CSS，则需要将其渲染为普通CSS，否则浏览器将忽略它。如果您没有使用预处理器，那么您最好仔细阅读CSS，因为它是无效的。@nzart请在呈现CSS后发布CSS（即普通CSS），不要为您的问题添加解决方案。让我知道如果你删除编辑，我会删除我的下载你奥利弗！这成功了！现在只需更改一些样式！没问题，祝项目顺利！