jQuery: create html elements from comma separated string?

Question

I'm trying to create HTML elements (div's) from a comma separated string using jQuery.

Lets say I have a string that looks like this:

options ="some texts, another text, some more text";

and I need to create something like this:

<div>some texts</div>
<div>another text</div>
<div>some more text</div>

I first split the comma separated string like so:

var str = options;
var temp = new Array();
temp = str.split(", ");

And then I need to create the div's after this function which I have no idea how to do this.

Could someone please advise on this?

Dhara Parmar · Accepted Answer · 2016-06-16 09:14:17Z

4

Try this:

var options ="some texts, another text, some more text";
var temp = options.split(", "); // first split string and convert it to array
var str = '';
$.each(temp, function(i,v) { // loop through array
  str += "<div>"+v+"</div>"; // create html string and store it in str variable
});
$("body").append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

edited Jun 16, 2016 at 9:14

answered Jun 16, 2016 at 9:04

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

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

Comments

Pranav C Balan · Accepted Answer · 2016-06-16 09:11:32Z

1

You can do something like this using jQuery

var options = "some texts, another text, some more text";
var temp = options.split(", ");

// iterate and generate array of jQuery elements
var divs = temp.map(function(txt) {
  // generate div using jQuery with text content as array element
  return $('<div/>', {
    text: txt
  })
})

// update html content, use `append()` if you want to append instead of replacing entire content
$('body').html(divs);

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

edited Jun 16, 2016 at 9:11

answered Jun 16, 2016 at 9:05

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Comments

gavgrif · Accepted Answer · 2016-06-16 09:19:53Z

1

You don't need to convert to an array- just replace the commas and associated spaces with a closing div and opening div tag and then add an opening one to start with and a closing one to end with and you have the html structure.

var options ="some texts, another text, some more text";
var temp = "<div>" + options.replace(/, /g,"</div><div>") + "</div>; 
   //this will give: <div>some texts</div><div>another text</div><div>some more text</div>

$("body").append(temp);

edited Jun 16, 2016 at 9:19

answered Jun 16, 2016 at 9:09

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2016-06-16 09:07:02Z

Assuming you want the text interpreted as text, not HTML, you'll want to loop over the array your code gives you and create elements individually, like this:

var options = "some texts, <another> text, some more text";
options.split(", ").forEach(function(opt) {
  $("<div>").text(opt).appendTo(document.body);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Note that I changed one of your entries to demonstrate the importance of ensuring they're treated as text, not HTML.

About your code:

var str = options;
var temp = new Array();
temp = str.split(", ");

The call to new Array() is completely unnecessary there, because you're overwriting the value of your temp variable on the very next line. split returns an array, it doesn't fill in one that it magically reaches out and grabs from the left-hand side of the assignment. :-) (There's also no reason to do var str = options; Just use options directly.)

Sabith · Accepted Answer · 2016-06-16 09:07:16Z

0

Try this:

 <div id="main-div"></div>
 <script type = "text/javascript"> 
     var options ="some texts, another text, some more text";
     options.split(',').forEach(function(item){
          $("#main-div").append("<div>"+item+"</div>");
     });
 </script>

answered Jun 16, 2016 at 9:07

Sabith

1,6562 gold badges22 silver badges42 bronze badges

Comments

Arnaud Gueras · Accepted Answer · 2016-06-16 09:07:21Z

-1

var str = options;
var temp = str.split(", ").map(function(strOption) {
   return '<div>' + strOption + '</div>';
}).join('');
myHTMLElement.innerHTML = $(temp);

edited Jun 16, 2016 at 9:07

answered Jun 16, 2016 at 9:04

Arnaud Gueras

2,06215 silver badges14 bronze badges

1 Comment

otajor Over a year ago

don't you want map instead of forEach? forEach will return undefined

Collectives™ on Stack Overflow

jQuery: create html elements from comma separated string?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related