Create div Using Array

Question

I have an array of strings, I want to show each array element in its own <div> tag like <div "class">one</div><div class"two">one</div> and each div tag should have a class that is common for all. All process start on click button

BUTTON CODE

<asp:Button OnClientClick="abc();" runat="server" />

JAVASCRIPT FUNCTION

function abc()
    {
        debugger;
        var arrayVariable = "one,two,three";
        var arrayLength = arrayVariable.length;
        var temp;
        for (i = 0; i < arrayLength; i++) {
            temp = document.createElement('div');
            temp.className = 'results';
            temp.innerHTML = arrayVariable[i];
            $('#inputcomshow').append(temp);
            //document.getElementById("#inputcomshow").value = replaced
        }

        }

Just stating what you want or need, is not a proper question for this site. You need to describe to us what specifically you are having trouble with. Please go read How to Ask. — C3roe
– C3roe, Commented May 31, 2018 at 6:37
Arrays are defined using []. So define your array var arrayVariable =[ 'one','two','three']; — Sudhir Ojha
– Sudhir Ojha, Commented May 31, 2018 at 6:38
@sudhir ojha i admitted array formate is [ 'one','two','three'] ok but i am getting the same problem — aparna rai
– aparna rai, Commented May 31, 2018 at 6:52
@CBroe i wand to show these elements like one,two,three show in <div class="classname"><div class="a">one<div><div class="a">two<div><div> formate — aparna rai
– aparna rai, Commented May 31, 2018 at 6:53
@CBroe I'll make my meaning clearer: There was no need for the sarcastic tone in "Did I not just tell you, that...". A bit of patience can help a beginner go a long way. — ItamarG3
– ItamarG3, Commented May 31, 2018 at 7:41

Gautam Rai · Accepted Answer · 2018-05-31 07:26:11Z

4

You need to convert string into array first.
Use this:

   function abc()
    {
        debugger;
        var stringVariable = "one,two,three"; // string
        var arrayVariable = stringVariable.split(","); // now string to array
        var arrayLength = arrayVariable.length;
        var temp;
        for (i = 0; i < arrayLength; i++) {
            temp = document.createElement('div');
            temp.className = 'results';
            temp.innerHTML = arrayVariable[i];
            $('#inputcomshow').append(temp);
            //document.getElementById("#inputcomshow").value = replaced
        }
     return false;
    }

edited May 31, 2018 at 7:26

answered May 31, 2018 at 6:40

Gautam Rai

2,5152 gold badges23 silver badges33 bronze badges

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

4 Comments

aparna rai Over a year ago

Thankx for help but i i have already try it but the problem is its not stable i mean it shows when click on button for a second then automatically hide it??

Gautam Rai Over a year ago

@aparnarai do you see appended html on page, may be it be hide by some css

aparna rai Over a year ago

ok so can you please do one more answer about this question? how to add one more <span class=""></span> with this div> like <div id= "inputcomshow"><div class="results" ><span class="res" >x<span></div></div>

Gautam Rai Over a year ago

@aparnarai you can just update as temp.innerHTML = arrayVariable[i]+'<span class="res" >x</span>';

Naveen · Accepted Answer · 2018-05-31 07:09:17Z

1

Use This

<asp:Button OnClientClick=" javascript:return abc();" runat="server" />



    <script>
    function abc() {
        debugger;
        var stringVariable = "one,two,three"; // string
        var arrayVariable = stringVariable.split(","); // now string to array
        var arrayLength = arrayVariable.length;
        var temp;
        for (i = 0; i < arrayLength; i++) {
            temp = document.createElement('div');
            temp.className = 'results';
            temp.innerHTML = arrayVariable[i];
            $('#inputcomshow').append(temp);
            //document.getElementById("#inputcomshow").value = replaced
        }
        return false;
    } 
</script>

answered May 31, 2018 at 7:09

Naveen

2941 silver badge11 bronze badges

1 Comment

aparna rai Over a year ago

Thank you for Answer can you please do one more answer about this question? how to add one more <span> with this div

Hanif · Accepted Answer · 2018-05-31 06:51:29Z

0

Try it with less number variable and pure javascript, because you only used single line jQuery code $('#inputcomshow').append(temp);.

function abc(){
    var arrayVariable = "one,two,three";
    arrayVariable = arrayVariable.split(',');
    for (i = 0; i < arrayVariable.length; i++) {
        temp = document.createElement('div');
        temp.className = 'results';
        temp.innerHTML = arrayVariable[i];
        document.getElementById("inputcomshow").appendChild(temp);
    }
}

edited May 31, 2018 at 6:51

answered May 31, 2018 at 6:41

Hanif

3,8451 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Create div Using Array

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related