在不使用innerHTML的情況下替換dhtml元素

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，我可以很容易做到$$（ '唱首歌' ）並獲取一個包含元素的數組。我可以使用.innerHTML並獲得'Do ##！'並改變它。但是我想，不，需要將整個元素插入到位。我可以通過兄弟姐妹和父母的奇怪的陰謀，然後走回節點，最終得到我需要的東西，我會這樣做。這似乎是我在這裏錯過了一些東西，這會讓這很容易。

Answer 1

在IE中，您可以設置outerHTML。在FF，您可以使用此：

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

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> 

，我需要包括Prototype：

<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

如果不是你想在你的網頁上運行的唯一的HTML生成，你可以考慮一個JavaScript模板引擎。
有幾個優點，主要是HTML視圖和JS邏輯之間的明確切分。

有很多這些引擎可用於各種口味。

下面是它將如何與原型。JS和PURE模板引擎：

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