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

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

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

Answer 3

所以我这样做的方式是：

对clicker内div类item内content内<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>
为每一个添加一个隐藏该锚点的函数，然后附加你想要的3个锚点

所以这就是我的html块看起来像：

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

我需要加入Prototype：

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;
}

一个变量来保存你的替换html，以及一个虚函数，所以我们插入的是：

<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>

然后，这是我的代码，您可能会发现有关这些工作方式的背景故事很有用：$$，Element.observe，Element.hide，Element.insert，{{3} }：

{{1}}

Answer 4

您可以添加和追加元素。

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);
}

在不使用innerHTML的情况下替换dhtml元素

4 个答案: