Passing in Array data into div elements

Question

So I need to get an array of values rendering in a selection of divs, could anyone help me as to the best way to tackle this?

I have to use javaScript.

What did you already tried? Do you have example data of which values in what kind of divs? — Bas van Dijk
– Bas van Dijk, Commented May 31, 2017 at 15:13
Hi, sorry for being brief. Yeah ideally if it could be in jQuery that would be the best option. — nattie87
– nattie87, Commented May 31, 2017 at 15:29
@BasvanDijk So it will just be a standard array and they just have to be popped in a div element. — nattie87
– nattie87, Commented May 31, 2017 at 15:31
@AlixEisenhardt Hi, sorry for being brief. Yeah ideally if it could be in jQuery that would be the best option. — nattie87
– nattie87, Commented May 31, 2017 at 15:40

mhodges · Accepted Answer · 2017-05-31 15:44:38Z

1

You can add DOM elements with JavaScript by creating the element you want, setting the properties/attributes as you desire, and then appending them to the DOM (either directly to the body, or to a containing element), like so:

var arr = ["text1", "text2", "text3"];
var container = document.getElementById("container");
arr.forEach(function (text) {
  var div = document.createElement("div");
  div.innerText = text;
  div.classList.add("div-added");
  container.append(div);
});

.div-added {
  padding: 10px;
  border: 2px solid #333;
}

<div id="container"></div>

Alternatively, you can use jQuery, like so:

var arr = ["text1", "text2", "text3"];
var container = $("#container");
arr.forEach(function(text) {
  var div = $("<div>", {
    text: text,
    class: "div-added"
  });
  container.append(div);
});

.div-added {
  padding: 10px;
  border: 2px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

answered May 31, 2017 at 15:44

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

1 Comment

nattie87 Over a year ago

So helpful @mhodges

Collectives™ on Stack Overflow

Passing in Array data into div elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related