javascript - 如何在没有页面加载onclick的情况下动态创建文本框

Question

我有这个表格:-

    <form action="">
    <table border="0">
        <td colspan="2" class="instruction">Select your desired option to search.</td>
    </table>
      <table>
        <tr>
          <td><label>
            <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
            Customer Code</label></td>
          <td><label>
            <input type="radio" name="search_option" value="company" id="search_option_1">
            Customer Company</label></td>
          <td><label>
            <input type="radio" name="search_option" value="name" id="search_option_2">
            Customer Name</label></td>
          <td><label>
            <input type="radio" name="search_option" value="email" id="search_option_3">
            Customer Email</label></td>
        </tr>
      </table>
      <input class="Button" name="search_submit" type="submit" value="Search">
    </form>

现在在最后一个</table>之后我想在选择任何选项按钮时创建一个文本框。意味着，动态地没有页面加载。

Answer 1

单独使用 Javascript:

// Create the element
var input = document.createElement("input");
input.type = 'text';
input.name = 'inputName';
input.value = 'some value';
input.size = 10;
input.maxLength = 10;
input.className = 'someClass';

// append the element
var btn = document.getElementsByName('search_submit')[0]; // get the button to insert the element before it;
btn.parentElement.insertBefore(input, btn);

与 jQuery 相同的过程:

$('input[name="search_submit"]').before('<input type="text" name="inputName" size="10" maxlength="10" class="someClass" />');

jsfiddle here

这是 jsfiddle对于 radio 的点击，检查只生成一次。