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

add textbox before another textbox with javascript

本文关键字：文本 一个 添加 javascript 另一个      更新时间：2023-09-26

我在HTML中有五个文本框。我想在textbox3之前添加另一个文本框。我该怎么做呢?

<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">


var textbox3 = document.getElementsByName("textbox3")[0];
var newTextbox = document.createElement("input");
newTextbox.setAttribute("type", "text");
var parent = textbox3.parentElement;
    
parent.insertBefore(newTextbox, textbox3);
<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">

可以选择具有document.getElementById()且参数为"10"的元素来匹配具有id和"10"的元素;使用.insertAdjacentHTML()，第一个参数设置为"afterend"，第二个参数设置为html <input>元素字符串

<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>
  document.getElementById("10")
  .insertAdjacentHTML("afterend"
  , "<input type=text id=123 name=textbox3-5 value=3.5>");
</script>

using insertBefore 

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]); 
<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"/>

希望对你有所帮助

/* 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/

你可以使用jquery:

<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>

相关文章：