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);。我希望这会有所帮助！

将具有CSS的div添加到DOM

1 个答案: