使用JavaScript的内容前右附加在标签元素(Append element in tag rig

2019-09-17 07:50发布

我将用一个例子说明：我需要转换下面的HTML与JavaScript

<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 /后。

Answer 1:

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

请注意，这是不值得包括图书馆只是这一点。

Answer 2:

这并不难:)

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

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