Добавить элемент в тег прямо перед содержимым с помощью Javascript

Я проиллюстрирую пример: мне нужно преобразовать следующий 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.


javascript html dom appendchild
person пацан    schedule 18.05.2012    source источник
comment
подходит ли вам jQuery? также это не будет действительным html вводом в href..   -  person jenson-button-event    schedule 18.05.2012
comment
возможный дубликат Как я могу реализовать добавление и добавление с помощью обычного Javascript ?   -  person Jeff Jenkins    schedule 18.05.2012
comment
Рассматривайте это как строку. Возьмите HTML, используйте .replace(), вставьте его обратно.   -  person Diodeus - James MacFarlane    schedule 18.05.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

Обратите внимание, включать библиотеку просто для этого не стоит.

person Sampson    schedule 18.05.2012
comment
Я знаю, с jQuery это просто, но на этот раз мне это не нужно. - person пацан; 18.05.2012

arrow_upward
2
arrow_downward

Это не так сложно :)

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

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