插入带有Prototypejs的innerHTML

Question

假设我有一个这样的清单：

<ul id='dom_a'>
  <li>foo</li>
</ul>

我知道如何在ul标记中插入元素：

Element.insert('dom_a', {bottom:"<li>bar</li>"});

因为我收到的字符串包含了dom id，所以我需要插入内部的，而不是整个元素。我需要一个函数来完成这个任务：

insert_content('dom_a', {bottom:"<ul id='dom_a'><li>bar</li></ul>"});

并获得：

<ul id='dom_a'>
  <li>foo</li>
  <li>bar</li>
</ul>

我该如何用原型来完成这个任务？

这是我想出的解决办法，谁能让这件事变得更好？

Zena.insert_inner = function(dom, position, content) {
  dom = $(dom);
  position = position.toLowerCase();
  content = Object.toHTML(content);
  var elem = new Element('div');
  elem.innerHTML = content; // strip scripts ?
  elem = elem.down();
  var insertions = {};
  $A(elem.childElements()).each(function(e) {
    insertions[position] = e;
    dom.insert(insertions);
  });
}

Answer 1

我认为您可以通过简单地附加临时元素的第一个子元素的innerHTML来精简代码：

Zena.insert_inner = function(dom, position, content) {
    var d = document.createElement('div');
    d.innerHTML = content;
    var insertions = {};
    insertions[position] = d.firstChild.innerHTML;
    Element.insert(dom, insertions);
}

不过，没有太大的进步，这里的例子。

Answer 2

我认为您可以在变量中解析代码块，然后向它请求它的innerHTML，然后使用insert将代码块插入到DOM实际节点的底部。

看起来可能是这样：

var rep_struct = "<ul id='dom_a'><li>bar</li></ul>";
var dummy_node = new Element('div'); // So we can easily access the structure
dummy_node.update(rep_struct);
$('dom_a').insert({bottom: dummy_node.childNodes[0].innerHTML});

Answer 3

我一直在研究原型文档，我发现了以下内容：更新功能。

通过描述它，您可以使用update函数来查找当前的bottom内容，然后通过添加所需的代码和前面存储的代码来更新它(就像innerHTML一样)。