Question

我有五个HTML格式的文本框。我想在textbox3之前使用javascript添加另一个文本框。我该怎么办？

<input type="text" id="43" name="textbox1">
<input type="text" id="85" name="textbox2">
<input type="text" id="10" name="textbox3">
<input type="text" id="25" name="textbox4">
<input type="text" id="99" name="textbox5">

Answer 1

＆＃13;

var textbox3 = document.getElementsByName("textbox3")[0];
var newTextbox = document.createElement("input");
newTextbox.setAttribute("type", "text");
var parent = textbox3.parentElement;
    
parent.insertBefore(newTextbox, textbox3);

＆＃13;

<input type="text" id="43" name="textbox1" value="1">
<input type="text" id="85" name="textbox2" value="2">
<input type="text" id="10" name="textbox3" value="3">
<input type="text" id="25" name="textbox4" value="4">
<input type="text" id="99" name="textbox5" value="5">

＆＃13;

Answer 2

您可以选择带有参数document.getElementById()的{{1}}的元素，以匹配具有"10" id的元素;使用"10"将第一个参数设置为.insertAdjacentHTML()，将第二个参数设置为"afterend"字符串html元素

<input>

Answer 3

使用insertBefore

＆＃13;

var new_text = document.createElement("input");
/* set attributes as you want */
//new_text.type = "text";
//new_text.id= "60";
//new_text.name="textbox3-2";
new_text.value="4th text input";
document.getElementsByName("textbox3")[0].parentNode.insertBefore(new_text, document.getElementsByName("textbox3")[0]);

＆＃13;

<input type="text" id="43" name="textbox1"/>
<input type="text" id="85" name="textbox2"/>
<input type="text" id="10" name="textbox3"/>
<input type="text" id="25" name="textbox4"/>
<input type="text" id="99" name="textbox5"/>

＆＃13;

Answer 4

希望这有助于你

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function (element) {
    element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */


  var NewElement = document.createElement("INPUT");
    NewElement.setAttribute("type", "text");
    NewElement.setAttribute("value", "");

/*  Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('10'));

https://jsfiddle.net/6cyth9k6/

Answer 5

您可以使用jquery执行此操作：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>
      <input type="text" id="43" name="textbox1">
      <input type="text" id="85" name="textbox2">
      <input type="text" id="10" name="textbox3">
      <input type="text" id="25" name="textbox4">
      <input type="text" id="99" name="textbox5">
      
      <script>
        //Event handler on deutsch click
        $( '<input type="text" id="99" name="textbox31">' ).insertAfter( "[name=textbox3]" );
      </script>
    </body>
</html>

＆＃13;

使用javascript在另一个文本框之前添加文本框

5 个答案: