Create a div using loop

Question

I create a div and its css id like this.

<div id="r1" class="ansbox"></div>
<div id="r2" class="ansbox"></div>
<div id="r3" class="ansbox"></div>
<div id="r4" class="ansbox"></div>
<div id="r5" class="ansbox"></div>
<div id="r6" class="ansbox"></div>
<div id="r7" class="ansbox"></div>
<div id="r8" class="ansbox"></div>
<div id="r9" class="ansbox"></div>
<div id="r10" class="ansbox"></div>

is there a way to create this div using looping statement. Anyone help me..

bokonic · Accepted Answer · 2012-07-09 15:50:22Z

20

I would recommend using some javascript (without jquery) for performance:

var toAdd = document.createDocumentFragment();
for(var i=0; i < 11; i++){
   var newDiv = document.createElement('div');
   newDiv.id = 'r'+i;
   newDiv.className = 'ansbox';
   toAdd.appendChild(newDiv);
}

document.appendChild(toAdd);

This way you only make one append(), only 1 reflow, and you don't need jQuery.

To append it to a jQuery selector:

$('sel').append(toAdd);

Or a dom element:

document.getElementById('sel').appendChild(toAdd);

answered Jul 9, 2012 at 15:50

bokonic

1,77110 silver badges12 bronze badges

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

5 Comments

Esailija Over a year ago

You can make only one append with jQuery as well

Elias Van Ootegem Over a year ago

I agree that using pure JS boosts performance, but creating a list of nodes the way you're suggesting is in essence slower than stringing the html together in most cases.

bokonic Over a year ago

I totally agree; I like making nodes because it lets you play with the DOM elements before you append them... but it's totally dependent on the use-case

ryanjdillon Over a year ago

For those curious, this approach seems to be a good way to of just stringing the html together, as mentioned here in the comments.

Nakul Tiruviluamala Over a year ago

I get error: HierarchyRequestError: The operation would yield an incorrect node tree. All I did was copy all the code until the line (this way you only make one append...) Did I need to use the code after the line as well?

thecodeparadox · Accepted Answer · 2012-07-09 15:52:38Z

10

Suppose you have following div where you will insert new divs:

<div id="target">
   <!-- all divs will append here -->
</div>

jQuery:

for(var i =1; i<= 10; i++){
  $('#target').append($('<div/>', { id: 'r' + i, 'class' : 'ansbox'}))
}

or

for(var i =1; i<= 10; i++){
  $('#target').append('<div id="r'+ i +'" class="ansbox"></div>')
}

I will go for first approach.

Related refs:

.append()

edited Jul 9, 2012 at 15:52

answered Jul 9, 2012 at 15:45

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

2 Comments

Mike Robinson Over a year ago

I like the object literal approach to attribute assignment, it's much easier to maintain

Nakul Tiruviluamala Over a year ago

I got ReferenceError: Can't find variable: $

ayyp · Accepted Answer · 2012-07-09 15:46:44Z

5

Here's one option:

for(var i = 0; i <=10; i++) {
   $('<div id="r'+i+'" class="ansbox"></div>').appendTo("target");
}

answered Jul 9, 2012 at 15:46

ayyp

6,5984 gold badges35 silver badges47 bronze badges

1 Comment

ayyp Over a year ago

@undefined target being wherever he wants to put it. Not a specific tag/variable...

Milo · Accepted Answer · 2019-01-18 15:38:16Z

<div class="ibox-content" id="location-div">                        
    <div class="row">
        <div class="col-sm-12">
            <button id="addlocation" type="button" class="btn btn-w-m btn-primary pull-right">Add new location</button>
        </div>
    </div>
    <div class="row" style="margin-top:10px;">
        <div class="col-sm-2">
            <label class="form-label">Location <span ><input type="text" readonly id="locval" style="width:20px;border:0px;" value="1"></span></label>
        </div>
        <div class="col-sm-10">
            <input type="text" name="" class="form-control "> 
        </div>
    </div>

</div>

Here I want to add a dynamic row by adding 1 to each new entry this will solve your problem

<script>
    $(document).ready(function(){
        var inno = document.getElementById("locval").value;
        for(var start = 1; inno >= start; start+=1)
        {
            start;
        }
    $("#addlocation").click(function(){
        $("#location-div").append('<div class="row" style="margin-top:10px;"><div class="col-sm-2"><label class="form-label">Location <span ><input type="text" readonly id="locval" style="width:20px;border:0px" value="'+start+++'"></span> </label></div><div class="col-sm-10"><input type="text" name="" class="form-control "></div></div>');
      });
    });
</script>

Wize · Accepted Answer · 2022-09-02 23:57:47Z

I would recommend using simple javascript loop (without jquery) for performance:




let container = document.getElementById('container');
    for (let i = 0; i <= 10; i++) {
        let element = document.createElement('div');
        container.appendChild(element);
    };
console.log(container);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Answer</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>




let container = document.getElementById('container');
    for (let i = 0; i <= 10; i++) {
        let element = document.createElement('div');
        container.appendChild(element);
    };

Collectives™ on Stack Overflow

Create a div using loop

5 Answers 5

5 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related