Question

I have a button which creates form elements on click .

My addelement function looks like this

function addElement(){
    to = document.getElementById('top');
    newId = document.createElement('div');
    id = 'my'+this.num;
    newId.setAttribute('id', id );
    newId.innerHTML = "<input type = 'text' value = ''>";
    to.appendChild(newId);
    this.num++;
}

… which renders the text input field to a form with ID = ‘top’ and creates a dynamic div for every form element

Now once the element is inside the form, I want to know a way to edit that element. How could that be done?

Answer 1

As you assign id to this element:

newId.setAttribute('id', id );

You can get this element by id using getElementById function:

var elementToEdit = document.getElementById('my123');

If you need to get input element, simple write:

var inputToEdit = elementToEdit.childNodes[0];

But I will reccomend you to not create elements from string. ie:

newId.innerHTML = "<input type = 'text' value = ''>";

the better is to use createElement function and then append it to newly created div