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

<form action="#">
    <p><input type="button" value="生成したa要素に属性名・値を設定" onclick="fSetAttribute()" /></p>
</form>
<ul id="searchLists"></ul>

<script type="text/javascript">
function fSetAttribute(){
    var search={
        "YAHOO! JAPAN" : "http://www.yahoo.co.jp",
        "Google" : "http://www.google.co.jp"
    }
    /* 親ノード */
    var parentObj=document.getElementById("searchLists");
    for(var i in search){
        /* LI要素を生成 */
        var listObj=parentObj.appendChild(document.createElement("LI"));
        /* a要素を生成し、LI要素に追加 */
        var aObj=listObj.appendChild(document.createElement("A"));
        /* a要素のhref属性にリンク先URLを設定 */
        aObj.setAttribute("href", search[i]);
        /* a要素のtitle属性にリンクテキストを設定 */
        aObj.setAttribute("title", i);
        /* a要素のtarget属性を設定 */
        aObj.setAttribute("target", "_blank");
        /* a要素のリンクテキストをテキストノードとして追加 */
        aObj.appendChild(document.createTextNode(i));
    }
}
</script>