Question

我正在构建一个小js库，我遇到了append和prepend方法的问题。这是我目前的设置

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

它们都按预期工作，正在添加内容，但遗憾的是，我正在修改的标记内的元素的所有事件侦听器都将丢失。有趣的是我没想到可能会导致问题。无论如何，我试着看看jQuery，看看他们是怎么做的，但他们的代码显然不是我理解的。我尝试查找其他问题，但没有找到解决方案。

如何在不失去听众的情况下实现这一目标？

Answer 1

如果您将DOM周围的元素作为对象而不是原始字符串表示移动，则将保留其附加事件和其他元。

您需要使用DOM的appendChild和insertBefore方法。小提琴：http://jsfiddle.net/QMLpL/2/

这是您更新的代码段：

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

更新的代码段需要DOM节点而不是字符串。

如果您需要字符串，请考虑将字符串用作CDATA节点：

node = document.createTextNode(str);

增强小提琴：http://jsfiddle.net/QMLpL/3/

用法：

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：

<div id="one">
    <p><a id="clicky" href="#">Hello World</a></p>
</div>
<div id="two">
    <p>Lorem Ipsum</p>
</div>

JavaScript的：

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?');

Answer 2

使用insertAdjacentHTML：

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

Answer 3

好的，这可能有用，我不确定。如何制作对象的深层克隆。然后解析你想要的新html 添加另一个变量。接下来循环递归这两个对象并添加所有对象他们的孩子换了新的。最后更换与您的新对象有关的对象。这个保持听众的方式我认为。它不会容易写，但它可能会给你一个想法。欢呼声。

Answer 4

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

Check MDN

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

Check MDN

以正确的方式添加东西

4 个答案: