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.

is jQuery an option for you? also that wouldn't actually be valid html an input in a href.. — jenson-button-event, May 18 '12 at 17:56
possible duplicate [How can I implement prepend and append with regular Javascript?](http://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript) — jeffjenx, May 18 '12 at 17:56
Treat it as a string. Grab the HTML, use .replace(), insert it back. — Diodeus - James MacFarlane, May 18 '12 at 17:57

score 2 · Answer 1 · answered May 18 '12 at 18:00

It's not that hard :)

(function() {
    var links = document.getElementsByTagName("a"),
        input,
        i = links.length;

    while (i--) {
        input = document.createElement("input");
        links[i].insertBefore(input, links[i].firstChild);
    }
}())

Sampson · Accepted Answer · 2012-05-18T18:16:45.587

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

I know, with jQuery it's simple but I don't need it this time. — пацан, May 18 '12 at 18:13

Append element in tag right before contents with Javascript

2 Answers2

.insertBefore, and .firstChild

Regular Expression

Modify .innerHTML

jQuery

Linked