Create element with specific position in JavaScript

Question

Assume I have 4 “th” elements on the page and on click of the button I need to create another “th” element but with specific position. For example if it’s 1997 it’ll be created in between 1995 and 2000 elements, and so on.

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

This is the code I have, but it creates new “th” at the very end.

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

I did. It doesn't contain a question. Is it how to insert an element at a specific position? — Felix Kling, Jan 25 '14 at 05:18
Or do you want to know how to *get* the position where you have to insert the element? I really can't tell. — Felix Kling, Jan 25 '14 at 05:25
Yes, insert a node in front or after another one. Similar logic as for insertCell(CellIndex), but it can't be used to create element — user3233751, Jan 25 '14 at 05:28
As already mentioned in one of the answers, you can do that with `.insertBefore`. Here is better documentation: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore — Felix Kling, Jan 25 '14 at 05:31

score 0 · Answer 1 · edited Jan 25 '14 at 05:54

0

check this out. you could use insertBefore()

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

edited Jan 25 '14 at 05:54

Roko C. Buljan

196,159
39
305
313

answered Jan 25 '14 at 05:13

omid.n

491
5
22

score 0 · Answer 2 · answered Jan 25 '14 at 05:19

0

To insert html after the nth element using jquery:

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

...where 1 is your nth element.

answered Jan 25 '14 at 05:19

Tims

1,987
14
16

From the `javascript` tag description: *"Unless a tag for a framework/library is also included, a pure JavaScript answer is expected."*. If you provide an answer using jQuery, then please add a non-jQuery option as well. – Felix Kling Jan 25 '14 at 05:26

Roko C. Buljan · Accepted Answer · 2014-01-26T13:16:10.183

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

Create element with specific position in JavaScript

3 Answers3