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.

1 answer

  • answered 2022-05-07 03:34 Pluveto

    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.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum