如何在HTML

时间:2016-03-19 20:52:49

标签: javascript jquery html

在下面的代码中,每次用户按下“添加”按钮时,我都会尝试生成一个选择框和文本字段。我面临的问题是如何生成具有不同名称的新文本字段。正如您在代码中看到的那样,文本框的名称为text1。例如,如何生成名为text2的新文本框。

<html>
<head>
    <title></title>
</head>
<body>
    <h1><center>Querying Social Media</center></h1>
    <form>
        <center>
            <select>
                <option value="Author">Author</option>
                <option value="Mention">Mention</option>
                <option value="Tag">Tag</option>
            </select>
            <input type="text" name="text1">
            <select>
                <option value="And">And</option>
                <option value="Or">Or</option>  
            </select>
            <input type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
            <script language="javascript">
                function add(type) {
                    //Create an input type dynamically.
                    var element = document.createElement("input");

                    //Assign different attributes to the element.
                    element.setAttribute("type", type);
                    element.setAttribute("value", type);
                    element.setAttribute("name", type);

                    var foo = document.getElementById("fooBar");

                    //Append the element in page (in span).
                    foo.appendChild(element);
                }
            </SCRIPT>
        </center>
    </form>
    <span id="fooBar">&nbsp;</span>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

你可以为所有三种类型制作三个全局变量,并且每次添加函数调用你根据类型对全局可行进行增量,然后设置文本框的名称,如(textbox_1,textbox_2,...)。 你的想法&gt;

答案 1 :(得分:0)

你必须这样做:

function add(type, value, name) {

  //Create an input type dynamically.
  var element = document.createElement("input");

  //Assign different attributes to the element.
  element.setAttribute("type", type);
  element.setAttribute("value", value);
  element.setAttribute("name", name);

  var foo = document.getElementById("fooBar");

  //Append the element in page (in span).
  foo.appendChild(element);
}

add("input","someValue", "text2");
<span id="fooBar"></span>