html - Append Label and Div inside a Div using Javascript AppendChild - Stack Overflow

admin管理员组

文章数量:1403443

I'm trying to create a dynamic form where user can add more fields for additional inputs.

When user click this button:

<input style="font-size=12px; width:170px;" name="add" type="button" id="add" class='btn-style'/>

Additional set of forms will be shown in this area:

<div id="collegediv"></div>

Using this script:

document.getElementById('add').onclick = function () {

    var collegediv = document.getElementById('collegediv'),
    inputatt = "form-control input-sm",
    firstdivatt = "form-group",
    div = document.createElement('div');
    div.setAttribute("class","col-sm-5");
    var div2 = document.createElement('div');
    div2.setAttribute("class","form-group");
    var label = document.createElement('label');
    label.setAttribute("class","col-sm-3 control-label input-sm");

    var input = document.createElement('input');
    collegediv.setAttribute("class",firstdivatt);
    input.type = "text";
    input.setAttribute("name", "college[]");
    input.setAttribute("placeholder","Name of College/University");
    input.setAttribute("class", inputatt);

    div.appendChild(input);
    div2.appendChild(label);
    div2.appendChild(div);
    collegediv.appendChild(div2);

};

The flow of the script is to

• Append a textbox inside the div variable
• Append a label inside the div2 variable
• Append a div inside the div2 variable also
• Then append the div2 inside the collegediv div

I'm also using bootstrap in the process, so the styling of <div> is like that.

My problem is that it doesn't format the way I think it should output.

Output/HTML SHOULD look like this:

<div id="collegediv">
  <div class="form-group">
    <label for="college" class="col-sm-3 control-label input-sm"></label>
    <div class="col-sm-5">
      <input type="text" name="college[]" class="form-control input-sm" placeholder="Name of College/University" required>
    </div>
  </div>
</div>

But this doesn't seem to be the output. My guess is that the appending of label and div inside the div2 is the problem. It's like they have conflict or overwriting the label with div once you append it also inside div2. Can anyone help me with this. Thanks.

I'm trying to create a dynamic form where user can add more fields for additional inputs.

When user click this button:

<input style="font-size=12px; width:170px;" name="add" type="button" id="add" class='btn-style'/>

Additional set of forms will be shown in this area:

<div id="collegediv"></div>

Using this script:

document.getElementById('add').onclick = function () {

    var collegediv = document.getElementById('collegediv'),
    inputatt = "form-control input-sm",
    firstdivatt = "form-group",
    div = document.createElement('div');
    div.setAttribute("class","col-sm-5");
    var div2 = document.createElement('div');
    div2.setAttribute("class","form-group");
    var label = document.createElement('label');
    label.setAttribute("class","col-sm-3 control-label input-sm");

    var input = document.createElement('input');
    collegediv.setAttribute("class",firstdivatt);
    input.type = "text";
    input.setAttribute("name", "college[]");
    input.setAttribute("placeholder","Name of College/University");
    input.setAttribute("class", inputatt);

    div.appendChild(input);
    div2.appendChild(label);
    div2.appendChild(div);
    collegediv.appendChild(div2);

};

The flow of the script is to

• Append a textbox inside the div variable
• Append a label inside the div2 variable
• Append a div inside the div2 variable also
• Then append the div2 inside the collegediv div

I'm also using bootstrap in the process, so the styling of <div> is like that.

My problem is that it doesn't format the way I think it should output.

Output/HTML SHOULD look like this:

<div id="collegediv">
  <div class="form-group">
    <label for="college" class="col-sm-3 control-label input-sm"></label>
    <div class="col-sm-5">
      <input type="text" name="college[]" class="form-control input-sm" placeholder="Name of College/University" required>
    </div>
  </div>
</div>

But this doesn't seem to be the output. My guess is that the appending of label and div inside the div2 is the problem. It's like they have conflict or overwriting the label with div once you append it also inside div2. Can anyone help me with this. Thanks.

• javascript
• html
• twitter-bootstrap

Share Improve this question Follow edited Mar 3, 2015 at 8:57 Logan Wayne asked Mar 3, 2015 at 8:40 Logan WayneLogan Wayne 5,9911616 gold badges3333 silver badges5050 bronze badges 3

• The output of your script is the same as you desired accept for label doesn't a for attribute? – slashsharp Commented Mar 3, 2015 at 8:52
• @Syahrul The last html sample is my desired output. But this doesn't seem to be the output. – Logan Wayne Commented Mar 3, 2015 at 8:59
• Your sample = the html output using the script except for a few attributes which you can add. – slashsharp Commented Mar 3, 2015 at 10:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This outputs EXACTLY what you said you wanted in your Output/HTML SHOULD look like this: section

document.getElementById('add').onclick = function () {

    var collegediv = document.getElementById('collegediv');

    //  Make first div    
    var div_form_group = document.createElement('div');
        div_form_group.setAttribute("class","form-group");

    //  Make label
    var label = document.createElement('label');
        label.setAttribute('for','college')
        label.setAttribute('class','col-sm-3 control-label input-sm');

    //  Make inner div
    var div_inner = document.createElement('div');
        div_inner.setAttribute('class','col-sm-5');

    //  Make input
    var input = document.createElement('input');
        input.type = 'text';
        input.setAttribute('name', 'college[]');
        input.setAttribute('class', 'form-control input-sm');
        input.setAttribute('placeholder','Name of College/University');
        input.setAttribute('required','required');

    //  Attach elements
    div_inner.appendChild( input );
    div_form_group.appendChild( label );
    div_form_group.appendChild( div_inner );
    collegediv.appendChild( div_form_group );

};

本文标签： htmlAppend Label and Div inside a Div using Javascript AppendChildStack Overflow