<style type="text/css">
li{width: 200px;margin-top: 10px }
#li1{background: red}
#li2{background: orange}
#li3{background: green}
</style>

<ol><li id="li1">li1</li><li id="li2">li2</li><li id="li3">li3</li></ol>
<input id="b1" type="button" value="li1替换li3">
<input id="b2" type="button" value="新元素替换li2">
<input id="b3" type="button" value="函数替换li1">
<input id="b4" type="button" value="li3替换li1">
<input id="b5" type="button" value="遍历li元素">
<input id="b6" type="button" value="数组插入li元素中">

<script>

//已有元素替换节点，被替换元素会变为替换元素，替换元素原有位置会被删除
$('#b1').click(function(){
$('#li3').replaceWith($('#li1'))
})

//新元素替换节点，被替换元素会变为新元素
$('#b2').click(function(){
$('#li2').replaceWith('<li>新元素</li>')
})

//函数替换节点，被替换元素会变为函数返回的新元素
$('#b3').click(function(){
$('#li1').replaceWith(function(){
return '<li>函数返回的新元素</li>'
})
})

//replaceAll() 被替换元素会变为替换元素，替换元素原有位置会被删除
$('#b4').click(function(){
$($('#li3')).replaceAll('#li1')
})

//遍历li元素，显示每个li元素的内容
$('#b5').click(function(){
$('li').each(function(){
alert($(this).text())
})
})

//遍历li元素，数组插入li元素中
$('#b6').click(function(){
var arr=['张三','李四','王五']
$('li').each(function(index){
$(this).text(arr[index])
})
})

</script>