在JavaScript中创建具有特定位置的元素

Question

假设我在页面上有4个“th”元素并且单击按钮我需要创建另一个“th”元素但具有特定位置。例如，如果它是1997年它将是创建于1995年和2000年之间的元素，等等。

<table>
<tr>
    <th>1990</th>
    <th>1995</th>
    <th>2000</th>
    <th>2005</th>
</tr>
......

这是我的代码，但它在最后创建了新的“th”。

 var tblHeadObj = document.getElementById('<%=Me.GridView1.ClientID %>'); //table head
 var newTH = tblHeadObj.rows[0].appendChild(document.createElement("th"))

Answer 1

检查一下。你可以使用 insertBefore（）

https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

Answer 2

使用jquery在第n个元素后插入html：

$("th:eq(1)").after("<th>1997</th>");

...其中1是你的第n个元素。

Answer 3

的 LIVE DEMO 的

var doc = document,
    ROW = doc.querySelectorAll("#myTable tr")[0],
    BUTTON = doc.querySelector("#submit"),
    INPUT = doc.querySelector("#setYear");    

function isNumber(n) { // http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function createYear(){      
  var VAL = parseInt(INPUT.value, 10);         // GET INPUT VALUE
  var TH = ROW.querySelectorAll("th");
  if(isNumber(VAL)){                           // MAKE SURE IT?S A NUMBER
    for(var i=0; i<TH.length; i++){            // LOOP TH ELEMENTS
      var y = parseInt( TH[i].innerHTML, 10 ); // GET YEAR
      if(y>VAL){                               // ONLY IF y>VAL
        var newTH = doc.createElement("th");   // CREATE NEW TH
        newTH.innerHTML = VAL;                 // INSERT VALUE INTO TH
        ROW.insertBefore( newTH, TH[i]);       // https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore
        break;
      }  
    }
  }else{
    alert("PLEASE ENTER A YEAR"); 
  }      
}

BUTTON.addEventListener('click', createYear); // BUTTON CLICK