使用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 />");

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