Замена элемента dhtml без использования innerHTML

Question

Кажется, это должно быть легко. У меня есть HTML-фрагмент, который я хочу найти и изменить на месте с помощью JavaScript. Но не только innerHTML; Я хочу заменить весь элемент. Пример:

  <div class="content">
    <div class="item">
      <img src="images/pic1.jpg" />
      <a class="clicker" onclick="javascript:doSomethingUseful(##);">Do ##!</a>
      <h3>title</h3>
      <p>description</p>
    </div>
  </div>

После загрузки страницы я хочу взять <a class="clicker" ...>Now!</a> и заменить его тремя экземплярами, такими как:

  <div class="content">
    <div class="item">
      <img src="images/pic1.jpg" />
      <a class="clicker" onclick="javascript:doSomethingUseful(1);">Do 1!</a>
      <a class="clicker" onclick="javascript:doSomethingUseful(2);">Do 2!</a>
      <a class="clicker" onclick="javascript:doSomethingUseful(3);">Do 3!</a>
      <h3>title</h3>
      <p>description</p>
    </div>
  </div>

Используя prototype.js, я легко могу сделать $$ ('. Clicker') и получить массив с элементом. Я могу использовать .innerHTML и получить «Do ##!» и измени это. Но я хочу, нет, нужен весь элемент, чтобы вставить его на место. Я могу пройти через странные махинации братьев и сестер и родителей и обойти узлы, чтобы в итоге получить то, что мне нужно, и я это сделаю. Просто мне кажется, что я что-то здесь упускаю, чтобы это было легко.

Answer 1

Если это не единственное генерирование HTML, которое вы хотите запустить на своей странице, вы можете рассмотреть движок шаблонов JavaScript.
Есть несколько преимуществ, основным из которых является четкое разделение между представлением HTML и логикой JS.

Существует множество таких двигателей на любой вкус.

Вот как это будет выглядеть с prototype.js и механизмом шаблонов PURE :

$$('div.content')[0].render([1,2,3], {
    'a.clicker':{
        'id <-':{
            '.':'Do #{id}!',
            '@onclick':'javascript:doSomethingUseful(#{id});'
        }
    }
});

Answer 2

Итак, я бы так и сделал:

1. Перебрать все якоря с классом clicker, которые находятся внутри div с классом item, которые находятся внутри класса content
2. К каждому из них добавьте функцию, которая будет скрывать этот якорь, а затем добавьте 3 желаемых якоря

Так вот как выглядит мой кусок html:

<div class="content">
  <div class="item">
    <img src="images/pic1.jpg" />
    <a class="clicker" href='#'>Do ##!</a>
    <h3>title</h3>
    <p>description</p>
  </div>
</div>

И мне нужно включить Прототип :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

И переменная для хранения заменяющего html, и фиктивная функция, поэтому то, что мы вставляем, работает:

var myReplacementHtml = '<a class="clicker" onclick="doSomethingUseful(1);" href="#">Do 1!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(2);" href="#">Do 2!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(3);" href="#">Do 3!</a>';

function doSomethingUseful(n) {
    alert(n);
    return false;
}

Тогда вот мой код, вам может пригодиться предыстория того, как они работают: $$, Element.observe, Element.hide, Element.insert, Event.stop:

<script type="text/javascript">
Event.observe(window, 'load', function(){
    $$('.content .item a.clicker').each(function(item){
        item.observe('click', function(evt){
            item.hide();
            Element.insert(item, {after: myReplacementHtml});
        });
        Event.stop(evt);
    });
});
</script>

Answer 3

Вы можете добавлять и добавлять элементы.

function doSomethingUseful(val) {

  var ele = document.getElementById('myDiv');
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  ni.appendChild(newdiv);
}

Answer 4

В IE вы можете установить externalHTML. В FF вы можете использовать это:

http://snipplr.com/view/5460/outerhtml-in-firefox/