Javascript 以正确的方式添加内容

我正在为自己构建一个小js库，我遇到了

append

和

prepend

方法的问题。这是我当前的设置

prepend: function(str) {
    this.node.innerHTML = str + this.node.innerHTML;
},
append: function(str) {
    this.node.innerHTML += str;
}

它们都按预期工作，正在添加内容，但不幸的是，我正在修改的标记中的元素的所有事件侦听器都丢失了。有趣的是，我没有想到这会引起问题。不管怎样，我试着查看jQuery，看看他们是怎么做的，但他们的代码显然不是我想要理解的。我试图查找其他问题，但没有真正找到解决方案

---

如何在不丢失侦听器的情况下实现这一点？

如果您将元素作为对象而不是原始字符串表示形式在DOM中移动，它们附加的事件和其他元元素将被保留

您需要使用DOM的

appendChild

和

insertBefore

方法。小提琴：

以下是您的更新片段：

prepend: function(newNode) {
    this.node.insertBefore(newNode,this.node.firstChild);
},
append: function(newNode) {
    this.node.appendChild(newNode);
}

更新后的代码段需要一个DOM节点，而不是字符串

---

如果您期望字符串，请考虑将字符串用作cDATA节点：

node = document.createTextNode(str);

增强型小提琴：

用法：

prepend: function(str) {
    newNode = document.createTextNode(str);
    this.node.insertBefore(newNode,this.node.firstChild);
},
append: function(str) {
    newNode = document.createTextNode(str);
    this.node.appendChild(newNode);
}

---

链接小提琴的内容如下

HTML:

---

使用insertAdjacentHTML：

prepend: function(str) {
    this.node.insertAdjacentHTML("beforebegin", str);
},
append: function(str) {
    this.node.insertAdjacentHTML("afterend", str);
}

---

好吧，这是可行的办法， 我不确定。做一个怎么样 所讨论对象的深层克隆。 然后解析你想要的新html 添加另一个变量。下一个循环 递归地遍历这两个对象并添加所有 他们的孩子要换一个新的。最后替换 正在讨论的对象与您的新对象。这 我认为听众是如何被保护起来的。不会的 写起来容易，但它可能会给你一个想法。 干杯。

请使用insertBefore（）JS HTML DOM方法在元素内容之前添加字符串

或用户appendChild（）JS HTML DOM方法，用于在元素内容之后添加字符串

---

jQuery使用内部DOMManip函数构建实际的DOM节点，这样所有元素都附加了本机appendChild，前面加了insertBefore等，并且从不使用innerHTML。@因此，我想这是一项艰苦的工作，但如何将html字符串拆分为节点呢？/你不会，您可以使用浏览器解析器解析该字符串，例如，将该字符串设置为documentFragment的内容，然后提取节点并将其插入实际DOM。请参阅我的Q中已接受的an，当您拥有整个DOM引擎时，为什么要自己解析它？FIREFOX不支持insertAdjacentHTML。记住这一点。在递归循环中使用appendChild。和innerHTML来创建新的合并对象。看来所有主流浏览器都支持

insertAdjacentHTML

。请看MDN，现在是版本24，我相信自2012年以来没有更新过的任何人都是自己带来的

：D

，这似乎正是我想要的，我不敢相信firefox不支持它

：根据MDN firefox 8.0版及以上版本支持
insertAdjacentHTML
。实际上我在查看旧信息，MDN声明目前所有主要浏览器都支持它，即使它不在ECMA中。非常感谢。我正在寻找一种附加html字符串的方法，但这将是我的选择。谢谢你的努力@php_nub_qq我有点困惑，如果你有HTML的字符串表示，为什么你会对维护孩子们的事件感兴趣？如果子节点有事件，则意味着您的曲目中有父节点most对象。处理原始DOM节点比将其序列化为字符串，然后让DOM重新解析要快。
var clicky = document.getElementById('clicky');
clicky.onclick = function() {
    console.log('clicked!');
    return false;
};

function append(target,node) {
    if ( typeof node === 'string' ) {
        node = document.createTextNode(node); // cast string as CDATA
    }
    target.appendChild(node);
}

function prepend(target,node) {
    if ( typeof node === 'string' ) {
        node = document.createTextNode(node);
    }
    target.insertBefore(node,target.firstChild);
}

var twoDiv = document.getElementById('two');
append(twoDiv,clicky);

var newElement = document.createElement('p');
newElement.onclick = function() {
    console.log('clicked the p');
    return false;
};
newElement.appendChild(document.createTextNode('Dolor sit amet.')); // add a CDATA node to the new P element
prepend(twoDiv,newElement);

append(twoDiv,'Waddup?');

prepend: function(str) {
    this.node.insertAdjacentHTML("beforebegin", str);
},
append: function(str) {
    this.node.insertAdjacentHTML("afterend", str);
}