Question

所以，我正在访问一个待办事项列表api来制作一个非常基本的待办事项列表应用程序。我能够显示我从api中调用的内容，我将标题，描述和价格分别附加到h1，h3和h4，然后在用户填写表单时显示到文档中。

如何将这三个附加到div中，以便我可以将CSS应用于每个待办事项，或者我可以在我想要删除或编辑待办事项时添加按钮？

如果可能的话，我想用普通的JavaScript来做这件事。

这是我的JavaScript代码，如果您在现有代码中看到任何您认为可以改进或更改的内容，或者如果有任何我做错的话，请告诉我。我仍然是这方面的初学者，所以我可以使用我能得到的所有帮助。

function Todo(title, description, price){
    this.title = title;
    this.description = description;
    this.price = price;
}

document.todo.addEventListener("submit", function(e){
    e.preventDefault();

    var titleForm = document.todo.title.value;
    var descriptionForm = document.todo.description.value;
    var priceForm = document.todo.price.value;

    var newTodo = new Todo(titleForm, descriptionForm, priceForm);

    axios.post("<todo api url>", newTodo).then(function(response){
        console.log(response.data);
    })
})

axios.get("<todo api url>").then(function(response){
    for(var i = 0; i < response.data.length; i++){
        var h1 = document.createElement("h1");
        var h3 = document.createElement("h3");
        var h4 = document.createElement("h4");

        var displaytitle = document.createTextNode(response.data[i].title);
        var displayDescription = document.createTextNode(response.data[i].description);
        var displayPrice = document.createTextNode(response.data[i].price);

        h1.appendChild(displaytitle);
        h3.appendChild(displayDescription);
        h4.appendChild(displayPrice);

        document.body.appendChild(h1);
        document.body.appendChild(h3);
        document.body.appendChild(h4);
    }
})

Answer 1

不是将它们附加到document.body，而是创建一个DIV并将它们附加到DIV，然后将DIV附加到身体上。

axios.get("<todo api url>").then(function(response){
    for(var i = 0; i < response.data.length; i++){
        var h1 = document.createElement("h1");
        var h3 = document.createElement("h3");
        var h4 = document.createElement("h4");
        var div = document.createElement("div");

        var displaytitle = document.createTextNode(response.data[i].title);
        var displayDescription = document.createTextNode(response.data[i].description);
        var displayPrice = document.createTextNode(response.data[i].price);

        h1.appendChild(displaytitle);
        h3.appendChild(displayDescription);
        h4.appendChild(displayPrice);

        div.appendChild(h1);
        div.appendChild(h3);
        div.appendChild(h4);

        document.body.appendChild(div);
    }
});

如果你想用CSS设置它们的样式，你可能应该给它们不同的类，或者给DIV一个类，例如。

div.classList.add("todoItem");

如何将多个元素附加到div？

1 个答案: