不使用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>

页面加载后，我想获取 Now! 并将其替换为三个实例，例如：

  <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

所以我这样做的方法是：

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

然后这是我的代码，您可能会找到它对于了解这些工作原理的背景故事很有用：$$< /a>, Element.observe, < a href="http://www.prototypejs.org/api/element/methods/hide" rel="nofollow noreferrer">Element.hide, Element.insert，Element.insert prototypejs.org/api/event/stop" rel="nofollow noreferrer">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 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);
}