DOM操作で、リスト項目を、他のリストへ移動するサンプル。
実装例
- 項目Ａ－１
- 項目Ａ－２
- 項目Ａ－３
- 項目Ａ－４
- 項目Ａ－５
- 項目Ｂ－１
- 項目Ｂ－２
- 項目Ｂ－３
- 項目Ｂ－４
- 項目Ｂ－５
実装例の動作について
- 「左のリストから右のリストへ」ボタンをクリックすると、左のリストの先頭の項目を右のリストの最後に移動する。
- 「右のリストから左のリストへ」ボタンをクリックすると、右のリストの先頭の項目を左のリストの最後に移動する。
ソースコード
JavaScript
<script type="text/javascript">
function sampleLtoR() {
var $getItems = document.getElementById( "sampleListA" ).children;
var $sampleListB = document.getElementById( "sampleListB" );
$sampleListB.appendChild( $getItems[0] );
}
function sampleRtoL() {
var $getItems = document.getElementById( "sampleListB" ).children;
var $sampleListA = document.getElementById( "sampleListA" );
$sampleListA.appendChild( $getItems[0] );
}
</script>
function sampleLtoR() {
var $getItems = document.getElementById( "sampleListA" ).children;
var $sampleListB = document.getElementById( "sampleListB" );
$sampleListB.appendChild( $getItems[0] );
}
function sampleRtoL() {
var $getItems = document.getElementById( "sampleListB" ).children;
var $sampleListA = document.getElementById( "sampleListA" );
$sampleListA.appendChild( $getItems[0] );
}
</script>
HTML
<p><button onclick="sampleLtoR();">左のリストから右のリストへ</button> <button onclick="sampleRtoL();">右のリストから左のリストへ</button></p>
<div id="sample">
<ol id="sampleListA">
<li>項目Ａ－１</li>
<li>項目Ａ－２</li>
<li>項目Ａ－３</li>
<li>項目Ａ－４</li>
<li>項目Ａ－５</li>
</ol>
<ol id="sampleListB">
<li>項目Ｂ－１</li>
<li>項目Ｂ－２</li>
<li>項目Ｂ－３</li>
<li>項目Ｂ－４</li>
<li>項目Ｂ－５</li>
</ol>
<div style="clear: left;"></div>
</div>
<div id="sample">
<ol id="sampleListA">
<li>項目Ａ－１</li>
<li>項目Ａ－２</li>
<li>項目Ａ－３</li>
<li>項目Ａ－４</li>
<li>項目Ａ－５</li>
</ol>
<ol id="sampleListB">
<li>項目Ｂ－１</li>
<li>項目Ｂ－２</li>
<li>項目Ｂ－３</li>
<li>項目Ｂ－４</li>
<li>項目Ｂ－５</li>
</ol>
<div style="clear: left;"></div>
</div>
CSS
<style>
#sample ol {
float: left;
width: 200px;
}
</style>
#sample ol {
float: left;
width: 200px;
}
</style>