javascript如何替换html内容，而不影响事件

 <div> 用户名：${Name}  <a href="#">处理方式</a></div>

例如上面的代码，a标签上绑定了点击事件，我想用js把 ${Name} 替换成其他的数据。如果用 innerHtml 来替换的话，a标签的事件就会消失。如何达到我说的目的呢？

ps：angular 框架实现了这样了可以随意替换内容，但是不知道它是如何实现的。

使用 delegate，即事件委派。
该方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
简单例子：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    var index = 1;
    var liItem = "hello ";
    $(document).ready(function(){
        $("#test").on("click","li",function(event){
            console.log(event.target.innerHTML);
            alert(event.target.innerHTML);
        });
        $("#addLi").on("click",function () {
            // body...
            $("#test").append("<li>"+liItem+index+"</li>");
            index += 1;
        })
    });

    </script>
</head>
<body>
<div>
<button id="addLi">add Item</button>
<lu id="test">
    <li>helllo 0</li>
    </lu>
</div>
</body>
</html>

jquery的text()方法

有个比较笨的方法，就是给你要替换的部分添个span标签，然后获取这个标签，再使用innerHTML.

使用 delegate，即事件委派。
该方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
简单例子：
<!DOCTYPE html>

<br> var index = 1;<br> var liItem = "hello ";<br> $(document).ready(function(){<br> $("#test").on("click","li",function(event){<br> console.log(event.target.innerHTML);<br> alert(event.target.innerHTML);<br> });<br> $("#addLi").on("click",function () {<br> // body...<br> $("#test").append("<li>"+liItem+index+"</li>");<br> index += 1;<br> })<br> });</p> <pre><code></script> </code></pre> <p></head><br> <body></p> <div> <button id="addLi">add Item</button> <lu id="test"> <li>helllo 0</li> </lu> </div> <p></body><br> </html></p>

可以采用jquery的html()，或者text()方法都可以

DOM API来操作，div.firstChild就是“用户名：${Name} ”这个文本节点

 <div id="dv"> 用户名：${Name}  <a href="#" onclick="alert('event')">处理方式</a></div> 
<input type="button" onclick="document.getElementById('dv').firstChild.data='用户名：xxxxxxx  '" value="替换"/>