javascript - Javascript を使用してコンテンツの直前にタグ内の要素を追加する

Question

例を挙げて説明します: 次の 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/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 />");

このためだけにライブラリを含める価値はないことに注意してください。