Javascript 插入文本框和下拉菜单

Javascript 插入文本框和下拉菜单,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我想保留电影的标题和类型,以备将来使用。我试图仅在单击“插入电影”一句时显示文本框和下拉菜单。在我单击该句之前会出现下拉菜单,我不知道如何更改。我还想以某种方式保留输入值 <html> <head> <title >MOVIES </title> <script type="text/javascript"> function myFunction() { document.getEl

我想保留电影的标题和类型,以备将来使用。我试图仅在单击“插入电影”一句时显示文本框和下拉菜单。在我单击该句之前会出现下拉菜单,我不知道如何更改。我还想以某种方式保留输入值

    <html>
    <head>
    <title >MOVIES </title> 

    <script type="text/javascript">
    function myFunction() {
    document.getElementById("a").innerHTML="<p><input type='text' name='title'>";
    }
    </script>

    </head>
    <body>
    <center>
    <form>
    <h1 style="color:black">MOVIES </h1>
    </center>
    <ul> 
    <li> <a  onclick="myFunction()">Insert a movie </a>    </li>
    <p id="a"></p>



    <select name="mydropdown">
    <option value="Action">Action</option>
    <option value="Animation">Animation</option>
    <option value="Comedy">Comedy</option>
    <option value="Drama">Drama</option>
    <option value="Fantasy">Fantasy</option>
    <option value="Horror">Horror</option>
    <option value="Mystery">Mystery</option>
    <option value="Romance">Romance</option>
    <option value="Sci-fi">Sci-fi</option>
    <option value="War">War</option> 

    </form>
    </body>
    </html>
在myFunction函数中,插入以下代码:

var dropDownElement = document.createElement("select")

document.body.appendChild(dropDownElement);
然后执行相同的操作,插入下拉列表的所有选项。有时你也可能想考虑隐藏下拉列表框。为此,您可以使用dropDownElement.style.display=none