Wrap div to javascript output

Question

Basically what I need to do is wrap this code output

<a id="show_selected">Click to Show</a>
<div id="selected"></div>

<script type="text/javascript">
    function showSelect(){
        $("#show_selected").bind("click", function (e) {
            e.preventDefault();
            $('#selected').text($("#fvip").mapster("get"));
        });
    }
    showSelect();
</script>

which is right now is just plain

<div id="selected">001,002,003,004</div>

to become

<div="selected">
   <div class="something">001</div> 
   <div class="something">002</div> 
   <div class="something">003</div> 
   <div class="something">004</div>
</div>

how can I do that? Is that possible? Many thanks

EDIT with brk 's help below:

I try incorporate it in my code like this:

    function showSelect(){
        $("#show_selected").bind("click", function (e) {
        e.preventDefault();
        $('#selected').text($("#fvip").mapster("get"));
            let wrapContainer = ""
            let stringArray = $("#selected").text().trim().split(' ');
            $("#selected").empty()
            stringArray.forEach(function(item, index) {
            let wrapContainer = $('<div class="test">' + item + '</div>');
            $("#selected").append(wrapContainer)
            });
        });
    }
    showSelect();

but what I'm getting is:

<div id="selected">
    <div class="test">001,002,003,004</div>
</div>

where am I doing wrong?

What exactly is the problem here? I assume you understand how the existing code works and which part does what. — Sergio Tulentsev, Jun 25 '18 at 16:24
Possible duplicate of [How to interpolate variables in strings in JavaScript, without concatenation?](https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation) — Alex, Jun 25 '18 at 16:25
The problem is I don't know how to wrap it inside
in order to style it :( — Work, Jun 25 '18 at 16:31

score 0 · Accepted Answer · answered Jun 25 '18 at 16:31

0

You can get the text and split it. Then loop over that and put that inside a div . Then append the div to the parent element

let wrapContainer = ""
let stringArray = $("#original").text().trim().split(' ');
$("#original").empty()
stringArray.forEach(function(item, index) {
  let wrapContainer = $('<div class="test">' + item + '</div>');
  $("#original").append(wrapContainer)
});

.test {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="original">001 002 003 004</div>

answered Jun 25 '18 at 16:31

brk

48,835
10
56
78

thanks much.. the result is
001 002 003 004
but what I need is
001

002

003

004
edited the question to make it clearer – Work Jun 25 '18 at 16:39
Each of 001 ,002,003,004 is in a separate div. You can check from dom – brk Jun 25 '18 at 16:46
You are correct sir :) I will try to incorporate that on my code – Work Jun 25 '18 at 16:56
I must be doing it wrong .. I edited the original code to add your suggestion – Work Jun 25 '18 at 16:59
The code is working as expected . I checked with your edited code – brk Jun 25 '18 at 17:04

Wrap div to javascript output

1 Answers1