Juli174,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
var idno = 2;
function addNewElement() {
var mainDiv = document.getElementById('more_element_area');
var innerDiv = document.createElement('div');
innerDiv.setAttribute('id', 'divId' + idno);
var generatedContent = '<input type="text" name="new_element' + idno + '" id="new_element' + idno + '"value="This is my text box' + idno + '"/> <a href ="javascript:void(0)" onclick="return removeThisElement(' + idno + ')">Remove This<\/a> <a href ="javascript:void(0)" onclick="return validateThisElement(' + idno + ')">Validate This<\/a>';
innerDiv.innerHTML = generatedContent;
mainDiv.appendChild(innerDiv);
idno++;
}
function removeThisElement(idnum) {
var mainDiv = document.getElementById('more_element_area');
var innerDiv = document.getElementById('divId' + idnum);
mainDiv.removeChild(innerDiv);
}
function validateThisElement(idnum) {
//if validate
var innerInput = document.getElementById('new_element' + idnum);
var mainDiv = document.getElementById('more_element_area');
var innerDiv = document.getElementById('divId' + idnum);
var innerP = document.createElement('p');
innerP.id = 'new_element' + idnum;
innerP.innerHTML = innerInput.value;
mainDiv.replaceChild(innerP, innerDiv);
}
</script>
</head>
<body>
<div id="more_element_area">
<div>
<input type="text" name="new_element1" value="This is my text box 1">
</div>
</div><a href="javascript:void(0)" onclick="return addNewElement()">+ Add more text box</a>
</body>
</html>