如何将输入框附加到同一页面

Question

我有一个 select 菜单，发生的情况是，如果用户 select Other，应该会在下面弹出另一个菜单输入字段，让他们进行说明。我在下面尝试了这个，但是，document.write 写了另一页。如何将其附加到当前页面！

        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.write(' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="other" required></div><span class="highlight"></span><span class="bar"></span></div>')
            }
        }

<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                    <option value="">Choose</option>
                    <option value="Son">Son</option>
                    <option value="Daughter">Daughter</option>
                    <option value="Other Relative">Other Relative</option>
                    <option value="Other">Other</option>
                </select>

Answer 1

我在你的 console.log 语句后添加了一个分号，它似乎起作用了。

function otherFunc() {
                var selectBox = document.getElementById("selectBox");
                var selectedValue = selectBox.options[selectBox.selectedIndex].value;
                if (selectedValue == "Other") {
                    document.body.innerHTML += ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="other" required></div><span class="highlight"></span><span class="bar"></span></div>';
                }
            }

<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                        <option value="">Choose</option>
                        <option value="Son">Son</option>
                        <option value="Daughter">Daughter</option>
                        <option value="Other Relative">Other Relative</option>
                        <option value="Other">Other</option>
                    </select>

Answer 2

试试这个：

const div = document.createElement('div')
div.setAttribute('class', 'group');
div.append('<div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="other" required></div><span class="highlight"></span><span class="bar"></span>');
document.getElementsByTagName('body').append(div);

Answer 3

在select下方填空div。然后如图所示使用 innerhtml

    function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="other" required></div><span class="highlight"></span><span class="bar"></span></div>'
            }
        }

 <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
        <option value="">Choose</option>
        <option value="Son">Son</option>
        <option value="Daughter">Daughter</option>
        <option value="Other Relative">Other Relative</option>
        <option value="Other">Other</option>
    </select>
    <div id="other"></div>

如何将输入框附加到同一页面

how to append input box to same page

html

javascript

ejs