javascript: insert html tag with innerHTML

Question

I have to integrate several html type tags (ex: <div id = "mysection"> <div class = "mycontainer"> <h1> mytitle </h1> </div> </div>) to format data (here "mytitle") output in javascript

So, I have in my HTML <span id="datahere"></span> and the js i need to edit is :

     function Bigdata(title, subtitle, type) {
        const mydata = document.getElementById('datahere');
        mydata.innerHTML += title + subtitle + (type ? ' <strong>(type is ' + type + ')</strong>' : '') +'<br/>';
    }
         // element in which the data is initialized, visible in another <span>
        const sprit = document.getElementById('sprit');

        // when a given message is received
        sprit.addEventListener(SpritEvents.MessageSprit, ({ data }) => {

            Bigdata('Sprit', data.text, data.type);
            // if there are actions, we offer links
            if (data.actions) {
                var links = '';
                for (var i = 0; i < data.actions.length; i++) {
                    if (i > 0) {
                        links += ', ';
                    }
                    let act = data.actions[i];
                    links += '<a data-val="' + act.value + '">' + act.title + '</a>';
                }
                Bigdata('Sprit', links);
            }
        });

I cannot integrate the tags which must "contain" data (title, subtitle, type) WHITH links if there are actions ... if I add my tags like this: mydata.innerHTML += '<div id = "mysection"> <div class = "mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/></div></div>'; that does not surround the whole, the div and the h1 are duplicated (surrounds on one side title, subtitle, type and on the other links). I'm not used to using pure javascript ... I hope you can help me

In mydata.innerHTML += '<div id = "mysection"> <div class = "mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/>';you are not closing your div tags — empiric
– empiric, Commented Jul 20, 2020 at 14:27
indeed ... mydata.innerHTML += '<div id = "mysection"> <div class = "mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/></div></div>' but don't change anything — Molly
– Molly, Commented Jul 20, 2020 at 14:32

Samuel Dostál · Accepted Answer · 2020-07-20 14:39:56Z

1

I recommend rewriting it using Template literals:

mydata.innerHTML += `<h1>${title}</h1>`;

More on this topic: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

This makes things look much lighter.

Also, it looks like you are not closing the html tags. For example: <div>, needs to be closed with </div>

edited Jul 20, 2020 at 14:39

answered Jul 20, 2020 at 14:29

Samuel Dostál

1401 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Molly Over a year ago

Thanks for the recommendation. For the tags which were not closed, this was forgotten when I copied my code ... sorry ... so I changed it in my message but it is not the cause of my little problem. ..

Molly Over a year ago

I think that the duplication of div and h1 is caused by the concatenation += but I don't know how to fix it ...

Collectives™ on Stack Overflow

javascript: insert html tag with innerHTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related