<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
注IE でこれを実行した後で DOM を確認しようとすると、name フィールドが使用できないことがわかります。IE は、このフィールドが読み取り専用であると宣言しているため、表示されません。ただし、次のテスト コードに示すように、フィールドは適切に送信されます。
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>