'How to add items from object in DOM with button click in javascript?

first time posting in here :)

I have recently started coding and for JS study practice, I wanted to make a button in my navbar that generates an object to DOM after clicking it. Can you please advise the steps regarding adding and appending items that I need to create inside addToDom function? I seem to mix up the process and after multiple failures have left the space blank.

P.S. Am I linking img correctly?

My current code so far:

const Kirstin = {
    firstName: 'Kirstin',
    lastName: 'Ortega',
    image: "img:resources/kirstin ortega.gif",
    alias: 'Police officer',
    getfullName: function(){
        this.firstName + ' ' + this.lastName;
    },
    
    addToDom: function(firstName, lastName, image, alias, getfullName,){

    }

}
const bodyElement = document.querySelector("btn1");
bodyElement.addEventListener("click", function (){
addToDom(this.firstName, this.lastName, this.image, this.alias, this.getfullName);
});

UPDATE I am trying to replicate the same structure in HTML file as follows:

 <article class = "articleTakeshi">
                <div class="cardTakeshi">
                    <img src="resources/takeshi kovacs.gif" alt="Avatar">
                    <div class="container">
                      <h2>Takeshi Kovacs</h2>
                      <p>The Last Envoy</p>
                    </div>
                  </div>
            </article>

So basically my goal is to create a new article with the same structure as pictured above using Javascript.

Solution 1:^[1]

Try this:

<html>

<body>
    <button id="btn1">Add</button>
    <div id="list">
        <article class="articleTakeshi">
            <div class="cardTakeshi">
                <img src="https://www.gravatar.com/avatar/6c488c6599d9a5855d7a5e5dbef2883f?s=48&d=identicon&r=PG"
                    alt="Avatar">
                <div class="container">
                    <h2>Takeshi Kovacs</h2>
                    <p>The Last Envoy</p>
                </div>
            </div>
        </article>
    </div>
    <script>
        function createElementFromHTML(htmlString) {
            var div = document.createElement('div');
            div.innerHTML = htmlString.trim();

            // Change this to div.childNodes to support multiple top-level nodes.
            return div.firstChild;
        }
        const Kirstin = {
            firstName: 'Kirstin',
            lastName: 'Ortega',
            image: "https://graph.facebook.com/10219900817020254/picture?type=large",
            alias: 'Police officer',
        }
        const
            addToDom = function ({
                firstName,
                lastName,
                image,
                alias,
                getfullName
            }) {
                function render() {
                    return createElementFromHTML(`
                    <article class="article${firstName}">
                        <div class="card${firstName}">
                        <img src="${image}" alt="Avatar">
                        <div class="container">
                            <h2>${firstName} ${lastName}</h2>
                            <p>${alias}</p>
                        </div>
                        </div>
                    </article>
                    `)
                }
                document.querySelector("#list").appendChild(render())
            }
        const bodyElement = document.querySelector("#btn1");
        bodyElement.addEventListener("click", function () {
            addToDom(Kirstin);
        });
    </script>
</body>

</html>

How it works?

createElementFromHTML will create DOM element from html string.

When click the button whose id is btn1, addToDom is called with argument Kirstin which is a object.

Function addToDom will extract all fields:

firstName,
lastName,
image,
alias,
getfullName

as function local variables.

and using these variables, the render function returns a rendered html string, and we convert it to a DOM. Then we add it to the end of #list.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pluveto

'How to add items from object in DOM with button click in javascript?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]