如何动态添加另一个字段

How to add the elemen statically, but invisible at design time, and then show it dynamically when some event come. at this case i use code HTML like these

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<input type="text" name="field_4" style="display:none"/>
<input type="text" name="field_5" style="display:none"/>
<a href="#">add another field</a>

at first time, field_4 and field_5 is invisible right? but when i click "add another field" then field_4 and field_5 should be visible.

is there any tips?

i dont mind if someone could solve this case with PHP, maybe this case is like FB, when u input ur contact info (ur number phone) if u have just 1 number it means u dont need to click "Add another phone", but if u have 2 or more number u could click it and field text would appear as many as u had clicked.

document.getElementById('field_4').display = 'inline'

That should work for your purposes.

You could just add a new element when you click the button instead of showing old invisible elements though.

var index = 2;
document.getElementById('addBtn').addEventListener('click', function() {
    var inp = document.createElement('input')
    inp.setAttribute('type', 'text')
    inp.setAttribute('name', 'field_' + index)
    document.insertBefore(inp, document.getElementById('addBtn'))
    index ++;
})

First of all, you don't need to have those hidden fields. That's not "adding them dynamically".

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<a href="#">add another field</a>

Next, tell the link to perform a JavaScript function when clicked:

<a href="javascript:void()" onclick="addField(e)">add another field</a>

Write your javascript:

;(function) {
    var counter = 3; //This is set to the number of initial fields.

    function addField(e) {
        e = e || window.event; //Normalize the event.

        counter++; //Increment the counter.

        //Create the new element.
        var element = document.createElement("input");
        element.setAttribute("type", "text");
        element.setAttribute("name", "field_" + counter);

        //Insert it before your link.
        e.target.parentNode.insertBefore(element, e.target);
    }
 })();