jQuery prepend() function altenative utilising vanilla JavaScript

Question

I am attempting to prepend a <tr><th>{...}</th><td>{...}</td></tr> to the following html element:

<table>
   <tbody>
        // Prepend element here...
        <tr>
            <th>Something here</th>
            <td>{...}</td>
        </tr>
        <tr>
            <th>Another thing here</th>
            <td>{...}</td>
        </tr>
    </tbody>
</table>

How could I prepend the element outlined above to <tbody> utilising vanilla js?

http://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript — Joao Leal, Dec 08 '14 at 11:05
You may like these: http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/ — Todd, Dec 08 '14 at 11:24
http://callmenick.com/2014/07/06/jquery-functions-javascript-equivalents/ — Todd, Dec 08 '14 at 11:25

score 2 · Accepted Answer · edited Mar 10 '15 at 10:21

2

var parentNode = document.querySelector('tbody'),
newChild = document.createElement('button'),
refChild = parentNode.firstElementChild;
parentNode.insertBefore(newChild, refChild);

edited Mar 10 '15 at 10:21

adriaan

1,088
1
12
29

answered Dec 08 '14 at 11:10

Todd

5,314
3
28
45

1

thanks for the edit! very readable. @harianus nice username. – Todd Mar 10 '15 at 11:12

Jack Traynor · Answer 2 · 2014-12-08T20:50:33.537

-1

If you give tbody an ID ('tbodyElement' in my example) you can try something like this...

var tbody = document.getElementById('tbodyElement');
tbody.innerHTML = '<tr><th>{...}</th><td>{...}</td></tr>' + tbody.innerHTML;

edited Dec 08 '14 at 20:50

answered Dec 08 '14 at 11:13

Jack Traynor

139
2

jQuery prepend() function altenative utilising vanilla JavaScript

2 Answers2