Question

I have a span and 5 different html structures which basically involve lists and divs.

I have 5 buttons. Clicking on each button should change the content of the span to one of these structures.

I know that it can be done as easily as using

document.getElementById("a").innerHTML = "<div> A </div>";

But if I have an html structure of 20-30 lines, is this the best approach? Or is there any better way?

Answer 1

If you are going to have a bunch of such buttons, you should utilize a function that you can call with passed data in order to not have to rewrite thing voer and over again something like

function insertHTML(id, content) {
    document.getElementById(id).innerHTML = content;
}

Then you can just put an onclick function on you button item like this:

<div class="button" onclick="insertHTML('idoftarget', '<div>html</div>')"></div>