标签：right reallyDo adoptNode js ele 穿梭 innerText document left
document.adoptNode 介绍请点这里
上代码
<!DOCTYPE html>
<html>
<head>
<title>shuttleBox</title>
<style type="text/css">
.box {
position: relative;
}
.shuttleBox {
position: absolute;
height: 500px;
width: 200px;
border: solid 1px #CCC;
display: inline-block;
}
#left {
top: 0px;
left: 0px;
}
#right{
top: 0px;
left: 300px;
}
button {
display: block;
margin-top: 10px;
}
.btn-box {
position: absolute;
top:200px;
left: 220px;
}
</style>
</head>
<body>
<div class="box">
<div id="left" class="shuttleBox">
<div>我在left1</div>
<div>我在left2</div>
<div>我在left3</div>
<div>我在left4</div>
<div>我在left5</div>
</div>
<div class="btn-box">
<button id="l2r">左穿右>></button>
<button id="r2l">右穿左<<</button>
</div>
<div id="right" class="shuttleBox"></div>
</div>
<script type="text/javascript">
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
if(!RegExp.prototype.isPrototypeOf(reallyDo)) {
return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")), replaceWith);
} else {
return this.replace(reallyDo, replaceWith);
}
}
function getEle(orgNode, targetNode){
//左 的unicode编码是 5DE6 查询地址http://m.zuo114.com/word/bianma.asp
//汉字替换不成功。。。。
var ele = orgNode.firstElementChild;
var newText = ''
if(ele) {
if(ele.innerText.indexOf('left') > -1) {
newText = ele.innerText.replaceAll('left',"right",false)
}
if(String(ele.innerText).indexOf('right') > -1) {
newText = ele.innerText.replaceAll('right',"left",false)
}
ele.innerText = newText
targetNode.appendChild(document.adoptNode(ele))
}else{
alert('没有更多内容可以移动啦！')
}
}
var leftNode = document.getElementById('left'),rightNode = document.getElementById('right');
document.getElementById('l2r').addEventListener('click',function(e){
getEle(leftNode, rightNode)
})
document.getElementById('r2l').addEventListener('click',function(e){
getEle(rightNode, leftNode)
})
</script>
</body>
</html>
结果显示如下图，没有动画。。。。为更好的体验，直接运行上述代码即可看到。
标签：right,reallyDo,adoptNode,js,ele,穿梭,innerText,document,left 来源： https://www.cnblogs.com/danker/p/12622278.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。