0

我想使用按钮将选择列表添加到我的网站。我需要使用节点，因为我需要能够在 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()它创建一个给定的元素，其中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 回答