CODEWITHSUNDEEP
javascriptjqueryhtml
Jackson
Jackson

Reputation: 820

jQuery: create html elements from comma separated string?

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?

Upvotes: 0

Views: 1966

Answers (6)

gavgrif
gavgrif

Reputation: 15509

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);

Upvotes: 1

Dhara Parmar
Dhara Parmar

Reputation: 8101

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>

Upvotes: 4

Pranav C Balan
Pranav C Balan

Reputation: 115222

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>

Upvotes: 1

Arnaud Gueras
Arnaud Gueras

Reputation: 2062

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

Upvotes: -1

Sabith
Sabith

Reputation: 1656

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>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074435

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.)

Upvotes: 0

Related Questions