CODEWITHSUNDEEP
javascripthtmldom-manipulation
Christian Lopez
Christian Lopez

Reputation: 218

How to append multiple elements to a div?

So, I am accessing a to-do list api to make a very basic to-do list app. I am able to display what I call from the api, I have the title, description, and price appended to an h1, h3, and h4 respectively and it then gets displayed to the document when the user fills out a form.

How can I append those three into a div, so that I can apply CSS to each individual to-do or so that i can add a button for when I want to delete or edit the todo?

And I want to do this in plain vanilla JavaScript, if possible.

Here is my JavaScript code and also if there is anything you see in the existing code that you feel can be improved or changed or if there is anything I am doing completely wrong, please tell me. I am still very much a beginner at this, so I can use all the help I can get.

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);
    }
})

Upvotes: 1

Views: 10140

Answers (1)

Barmar
Barmar

Reputation: 780724

Instead of appending them to document.body, create a DIV and append them to the DIV, then append the DIV to the body.

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);
    }
});

If you want to style them with CSS, you probably should give them distinct classes, or give a class to the DIV, e.g.

div.classList.add("todoItem");

Upvotes: 1

Related Questions