PHP & JavaScript Room :: 設置サンプル

<!-- 
ex. 第1引数にTRUEを指定し、LI要素の子ノード（INPUT要素）を含めて複製する。
 -->

<style type="text/css">
ol#boxies {
    margin:0; padding:0 0 0 26px;
    list-style-type:decimal;
}
    ol#boxies li {
        margin:0 0 5px 0; padding:0;
        font-weight:bold; 
    }
    ol#boxies li.bg01 input {
        border:1px solid #666;
        background-color:#eee;
    }
    ol#boxies li.bg02 input {
        border:1px solid #666;
        background-color:#ffffff;
    }
</style>

<form action="#">
    <p><input type="button" value="ノード複製" onclick="fCopyNode()" /></p>
    <ol id="boxies">
        <li id="mbox1" class="bg02"><input type="text" name="t1" size="50" maxlength="10" /></li>
    </ol>
</form>

<script type="text/javascript">
function fCopyNode(){
    /* コピー元ノード */
    var copyObj=document.getElementById("mbox1");
    /* クローンノード（ノード複製） */
    var cloneObj=copyObj.cloneNode(true);
    /* 親ノード */
    var parentObj=document.getElementById("boxies");
    /* クローンノードにID名、クラス名を付与 */
    var nodeLen=parentObj.childNodes.length+1;
    cloneObj.id="mbox"+nodeLen;
    cloneObj.className="bg0"+(parseInt(nodeLen%2)+1)
    /* ノード追加 */
    parentObj.appendChild(cloneObj);
}
</script>