使用Javascript在内容之前的标签中附加元素

Question

我用一个例子来说明：我需要用javascript转换下面的html

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

编码

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

我不知道如何使用 createElement、appendChild 或 insertBefore/After 来实现。

Answer 1

没那么难:)

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

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

Answer 2

.insertBefore 和 .firstChild

您可以在每个锚点的第一个子元素之前插入新的输入元素：

// 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 );
}

演示：http://jsbin.com/ibugul/edit#javascript,html

正则表达式

或者您可以使用replace 方法：

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

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

修改.innerHTML

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

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

jQuery

如果您已经在您的网站上使用jQuery，您可以使用它来缩短它：

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

注意，不值得为此包含库只是。