Javascript 使用DOM创建输入_Javascript_Html_Dom

Javascript 使用DOM创建输入

javascript html dom

Javascript 使用DOM创建输入,javascript,html,dom,Javascript,Html,Dom,我目前一直在编写这段代码，但我似乎无法理解它。我计划这样做，如果按下单选按钮，发货不是免费的，就会弹出一个输入字段，指定使用DOM的额外成本。我还试图找出如何添加文本来描述输入字段，以及如何验证输入字段 <!DOCTYPE html> <html> <head> </head> <body> <script> function myFunction()

我目前一直在编写这段代码，但我似乎无法理解它。我计划这样做，如果按下单选按钮，发货不是免费的，就会弹出一个输入字段，指定使用DOM的额外成本。我还试图找出如何添加文本来描述输入字段，以及如何验证输入字段

<!DOCTYPE html>
<html>
    <head>        
    </head>
    <body>
        <script>

        function myFunction() {
            var x = document.createElement("INPUT");
            var c = 1;
            if (c = 1) {
            x.setAttribute("type", "text");

            var sp2 = document.getElementById("emailP");            
    //      var br = document.createElement("br");
    //      sp2.appendChild(br);
    //      alert("added break");           
            var sp2 = document.getElementById("emailP");
            var parentDiv = sp2.parentNode;
            parentDiv.insertBefore(x, sp2); 
            c++;
            alert("Added Text Box");
            }
            }
        </script>
        <form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

            <p class="boldParagraph">Upload an Image:</p>
            <input type="file" id="pic" accept="image/*" required>

            <p class="boldParagraph">Name of seller:</p> 
            <input class="averageTextBox" type="text" id="seller" value="" required>

            <p class="boldParagraph" id = "tip3P">Shipping costs are free:</p>
            <input type="radio" name="tip3" value="3" checked /> Yes
            <input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;"/> No

            <p class="boldParagraph" id = "emailP">Email of seller:</p>
            <input class="averageTextBox" type="email" id="emailAddress" value="" required>

            <p class="boldParagraph">Closing date for auction:</p> 
            <input type="date" id="closeDate" value="" required>

            <br><br>
            <button>Submit</button>

        </form>
    </body>
</html>


函数myFunction（）{
var x=document.createElement（“输入”）；
var c=1；
如果（c=1）{
x、 setAttribute（“类型”、“文本”）；
var sp2=document.getElementById（“emailP”）；
//var br=document.createElement（“br”）；
//附肢儿童（br）；
//警报（“新增中断”）；
var sp2=document.getElementById（“emailP”）；
var parentDiv=sp2.parentNode；
parentDiv.insertBefore（x，sp2）；
C++；
警报（“添加的文本框”）；
}
}
上传图像：
卖方名称：
运输费用免费：
对
不
卖方的电子邮件：
拍卖截止日期：



提交

更换警报（“添加的文本框”）

与：

创建

标签

元素并使用

innerHTML

填充文本。然后附加到DOM

示例代码段：

函数myFunction（）{
var label=document.createElement（“标签”）；
label.innerHTML=“
装运成本：”；
var x=document.createElement（“输入”）；
var c=1；
如果（c=1）{
x、 setAttribute（“类型”、“文本”）；
var sp2=document.getElementById（“emailP”）；
//var br=document.createElement（“br”）；
//附肢儿童（br）；
//警报（“新增中断”）；
var sp2=document.getElementById（“emailP”）；
var parentDiv=sp2.parentNode；
parentDiv.insertBefore（x，sp2）；
parentDiv.insertBefore（标签，x）；
C++；
警报（“添加的文本框”）；
}
}


上传图像：
卖方名称：
运输费用免费：
对
不
卖方的电子邮件：
拍卖截止日期：




提交

您不想创建不可见的文本字段并在需要时显示它吗？正确，因此当我按下单选按钮时，会出现输入字段，其中的文本指示它是什么，但是如果我单击“没有费用”，该框应该会消失。我试图通过DOM/JS添加插入元素来实现这一点。在您的情况下，最好更改元素的

.style.display

或

.style.visibility

属性，并更改

required

属性的值。我只尝试使用DOM和JS来实现这一点，我还没有读过很多关于Jquery的文章，我想看看单用DOM/JS就可以做多少操作。到目前为止，我的代码在其中添加了一个输入框，但当单击单选按钮时，我不知道如何添加一个带有文本的中断，以指示其运费成本。@Brandon:我已经更新了答案。这就是您要找的吗？是的，我非常感谢您花时间研究我的问题。我将尝试从这里进一步操纵它。直到现在我才真正了解innerHTML。我一定会调查的。谢谢

        var additional_fees = prompt("Type in");
        x.setAttribute("value", additional_fees)