如何使用JavaScript在div中创建输入标记_Javascript_Html_Dom

如何使用JavaScript在div中创建输入标记

javascript html dom

如何使用JavaScript在div中创建输入标记,javascript,html,dom,Javascript,Html,Dom,如何在div中创建输入标记 <!DOCTYPE html> <html> <head> <script> var x = document.createElement("INPUT"); x.setAttribute("type", "text"); document.body.appendChild(x); </script&

如何在div中创建输入标记

<!DOCTYPE html>

<html>

    <head>
        <script>
            var x = document.createElement("INPUT");
            x.setAttribute("type", "text");
            document.body.appendChild(x);
        </script>
    </head>

    <body>
       <div>
           Test
       </div>
    </body>

</html>


var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文本”）；
文件.正文.附件（x）；
试验

如何将输入标记添加到div

假设您的目标div的ID为，例如，

target

，您可以像这样使用

document.createElement

：

var div = document.getElementById("target");
var input = document.createElement("input");

//setting the input's properties, e.g.:
input.type="text";
input.name="my_input";

//adding the input to the div
div.appendChild(input);

注意：要使

getElementById

正常工作，您需要将脚本放在文件末尾，或将其包装在

onload

事件中，例如：

onload = function() {
  //insert code here
}

假设您的目标div的ID为，例如，

target

，您可以像这样使用

document.createElement

：

var div = document.getElementById("target");
var input = document.createElement("input");

//setting the input's properties, e.g.:
input.type="text";
input.name="my_input";

//adding the input to the div
div.appendChild(input);

注意：要使

getElementById

正常工作，您需要将脚本放在文件末尾，或将其包装在

onload

事件中，例如：

onload = function() {
  //insert code here
}

首先，您需要以某种方式在所有

div

中识别特定的

div

（可能很多）。您可以通过多种方式实现这一点，可能是最常见的方式：为

div

元素指定

class

属性和/或

id

属性，如下所示：

假设您选择将一个类分配给要在其中插入

input

元素的

div

。那么您的div代码将如下所示：

<div class="test-class">
    Test
</div>

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <div class="test-class">
           Test
       </div>

       <script>
           var x = document.createElement("INPUT");
           x.setAttribute("type", "text");
           document.body.querySelector(".test-class").appendChild(x);
       </script>
    </body>
</html>

不幸的是，这并不是代码中需要解决的所有问题。由于javascript和html是从上到下逐行解释的，因此在脚本执行时，所选的

div

元素尚未创建

我们可以通过移动html正文底部的脚本来轻松解决这个问题。这样，如果我们需要使用javascript操作页面，那么页面上的所有内容都将可见。完整的解决方案如下所示：

<div class="test-class">
    Test
</div>

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <div class="test-class">
           Test
       </div>

       <script>
           var x = document.createElement("INPUT");
           x.setAttribute("type", "text");
           document.body.querySelector(".test-class").appendChild(x);
       </script>
    </body>
</html>


试验
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文本”）；
document.body.querySelector（“.testclass”）.appendChild（x）；