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.
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);
}
}())
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
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;
});
}
var a = document.getElementsByTagName("a"),
c = a.length;
while ( c-- ) a[c].innerHTML = "<input />" + a[c].innerHTML;
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.
