How to create a list of links and divs with JavaScript

Question

I wish to create divs, contents of the div, put those each in an tag, and then assign links the to the with JavaScript.

I apologize in advance for the inception of my situation.

This is what the interior of the sidebar looks like right now:

<div id="sidebar">
  <a href="link.a"><div>item a</div></a>
  <a href="link.b"><div>item b</div></a>
  <a href="link.c"><div>item c</div></a>
</div>

I want to create the inside the "sidebar" div using two arrays:

var linkList = ["link.a", "link.b", "link.c"];
var titleList = ["item a", "item b", "item c"];

I want the final html code to look like this:

<div id="sidebar" onload="createLinks()">
</div>

Unfortunately, I don't know how to code the JavaScript to make this work. If someone could help me, that'd be great!

the onload will not work like this, since it's not available on a div element. — Snapstromegon
– Snapstromegon, Commented Apr 9, 2019 at 19:45
You could either take the onload onto the body element, listen for the load event in your script or mark your script with defer. — Snapstromegon
– Snapstromegon, Commented Apr 9, 2019 at 19:53

Maheer Ali · Accepted Answer · 2019-04-09 19:56:39Z

2

You can loop through one array using forEach() and add html using insertAdjacentHTML.

Note: As some users mentioned in comments onload can't be used on the elements. You could either call the function inside window.onload or just put <script> in the end of <body>

var linkList = ["link.a", "link.b", "link.c"];
var titleList = ["item a", "item b", "item c"];

let sidebar = document.querySelector('#sidebar');

linkList.forEach((x,i) => {
  sidebar.insertAdjacentHTML("beforeend",`<a href="${x}"><div>${titleList[i]}</div></a>`)
})

<div id="sidebar">
</div>

edited Apr 9, 2019 at 19:56

answered Apr 9, 2019 at 19:49

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

How to create a list of links and divs with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related