Append element in tag right before contents with Javascript

Question

I'll illustrate with an example: I need to convert the following html with javascript

<a>Text 1</a>
<a>Text 2</a>
<a>Text 3</a>
...

to code

<a><input/>Text 1</a>
<a><input/>Text 2</a>
<a><input/>Text 3</a>
...

I don't have a clue how to achieve that with createElement, appendChild or insertBefore/After.

Answer 1

.insertBefore, and .firstChild

You could insert your new input element before the first child of each anchor:

// Gather up a reference to all anchors
var anchors = document.getElementsByTagName("a"), inputEl;
// Cycle over all of them
for ( var i = 0; i < anchors.length; i++ ) {
  // Create a new input field
  inputEl = document.createElement("input");
  // Insert it before the first child of the anchor
  anchors[i].insertBefore( inputEl, anchors[i].firstChild );
}

Demo: http://jsbin.com/ibugul/edit#javascript,html

Regular Expression

Or you could use the replace method:

var a = document.getElementsByTagName("a"), 
    c = a.length;

while ( c-- ) {
  a[c].innerHTML = a[c].innerHTML.replace( /(.*)/, function( s, c2 ){
    return "<input />" + c2;
  }); 
}

Modify .innerHTML

var a = document.getElementsByTagName("a"), 
    c = a.length;

while ( c-- ) a[c].innerHTML = "<input />" + a[c].innerHTML;

jQuery

If you're already using jQuery on your site, you could use that to make this even shorter:

$("a").prepend("<input />");

Note, it is not worth including the library just for this.