这样的html结构，如何使用 js 动态修改文本，并且不影响子节点？

html如下：

html<p>自定义文本<button>子节点</button></p>

我想根据 js 拿到的数据动态修改“自定义文本”处的文字，但是不影响 button 子节点（button 上面绑定了事件回调）。请问用什么方法可以做到呢？

---

<p><span>自定义文本</span><button>子节点</button></p>

---

拿到p里面的文字，再拿到button里面的文字，用p里面的文字减去button里面的文字就可以了

---

@小俞的方法最好

---

http://stackoverflow.com/questions/6520192/get-text-node-of-an-element

---

是不是可以先获取到button的outerHtml,然后在修改p里面的html，最后再把button append进去？这样会影响事件绑定吗

---

<p id="test">自定义文本<button id="c">子节点</button></p>





<script>
    var p = document.getElementById('test'),
        c = document.getElementById('c');

    c.onclick = function(){
        alert('事件还在!!');
    };

    setInterval(function(){
        p.firstChild.nodeValue = Math.random();
    }, 1000);
  </script>

---

小俞的方法最好：

在p标签的内部前面加上字符
在button标签的外部加上字符

然后在p标签中取span标签即可