0

ボタンを使用して自分の Web サイトに選択リストを追加したいと考えています。ノードを使用する必要があるのは、DOM 内でノードにアクセスできるようにする必要があるため、後でその値を取得できるため、innerHTML を使用できないからです。

私の問題は、createTextNode が私のリストを引用符で囲んでいるように見えるため、表示されないことです。誰でも私を助けてくれますか

<!doctype html>
<html>
 <head>
  <title> Pop Up </title>

<script>
function change()
{
    var theDiv = document.getElementById("dropDownList");
    var content = document.createTextNode("<select name='scrapbookID' id='scrapbookID'><option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option></select>");

    theDiv.appendChild(content);
}
</script>

<style type = "text/css">


</style>


</head>
<body>

    <div id = "signout">
        Your are Currently signed in.<br />
        <a href = "#" id = "signOutPHP">Sign Out</a>
         <div id = "dropDownList">
            <button onclick="change()">Add List</button>

        </div>
    </div>

</body>

4

2 に答える 2

1

必要な.createElement()のは、指定された要素を作成することです。as は、指定さcreateTextNodeれたコンテンツでテキスト ノードを作成します。

function change()
{
    var theDiv = document.getElementById("dropDownList");

    var select  = document.createElement('select');
    select.name = 'scrapbookID';
    select.id = 'scrapbookID';
    select.innerHTML = "<option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option>"

    theDiv.appendChild(select);
}

デモ:フィドル

于 2013-04-28T16:55:51.087 に答える
1

テキスト ノードを作成するときは、HTML ではなくテキストとして扱われます。しかし、DOM を適切に構築するだけの方がクリーンです。

function change() {
    var theDiv = document.getElementById("dropDownList");

    var selectBox = document.createElement("select");
    selectBox.id = "scrapbookID";
    selectBox.name = "scrapbookID";

    var options = {
        "15": "one",
        "18": "two",
        "20": "three",
        "21": "four"
    };

    for(var x in options) {
        if(options.hasOwnProperty(x)) {
            var option = document.createElement("option");
            option.value = x;
            option.appendChild(document.createTextNode(options[x]));

            selectBox.appendChild(option);
        }
    }

    theDiv.appendChild(selectBox);
}
于 2013-04-28T16:58:59.413 に答える