Question

我正在尝试在表单中移动元素，然后将显示更改为阻止。我正在改变显示但似乎无法移动它，这是我正在使用的代码

<form action="testsubmit.php">
    <div id="placehere">
    </div>
    <input type="submit" value="submit">
</form>

<div id="input1" style="display:none">
<input type="text" name="test" id="input1">
</div>

<button onclick="test()">Click me</button>


<script>
function test(){
    document.getElementById('input1').appendChild(document.getElementById('placehere'));
    document.getElementById('input1').style.display = 'block';
}
</script>

Answer 1

插入必须以相反的方式完成

document.getElementById('placehere').appendChild(
     document.getElementById('input1')
);

通过appendChild()进行的DOM插入实际上是<parentNode>.appendChild(<node>)

然后，显示元素javascript是没有必要的。默认情况下，只需通过CSS隐藏input，并在form元素

内显示它

#input1 { display: none }
#placehere #input1 { display: block }

Answer 2

你试过了吗？

     document.getElementById('placehere').appendChild(document.getElementById('input1'));

Answer 3

试试此代码

<form action="testsubmit.php">
    <div id="placehere"></div>
    <input type="submit" value="submit">
</form>

<div style="display:none">
<input type="text" name="test" id="input_text">
</div>

<button onclick="test()">Click me</button>


<script>
function test(){
    document.getElementById('placehere').appendChild(document.getElementById('input_text'));
    document.getElementById('input_div').style.display = 'block';
}
</script>

使用Javascript将输入移动到表单中

3 个答案: