Javascript 运行后正在清除HTML页面_Javascript_Jquery_Html

Javascript 运行后正在清除HTML页面

javascript jquery html

Javascript 运行后正在清除HTML页面,javascript,jquery,html,Javascript,Jquery,Html,在这里，我正在练习将jQuery与html结合使用。我有一张表格，是关于你的车的问题。问题是一切正常，但在表单重置后，它会删除刚刚添加的所有内容 $("#pp").append("<ul>") $("#pp").append("<li>Make: " + make + "</li>" + "<br/><li>Model: " + model +

在这里，我正在练习将jQuery与html结合使用。我有一张表格，是关于你的车的问题。问题是一切正常，但在表单重置后，它会删除刚刚添加的所有内容

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

我调试了这个程序，它正在做我想做的事情，但一旦它停止执行“writeHtml”，它所做的一切都会被清除

<!DOCTYPE HTML>
<html>
    <head>
        <title> Sabio Practice </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>

            $(document).ready(function(){

                function writeHtml(){           
                    var model = $("#Model").val();
                    var make = $("#Make").val();
                    var year = $("#Year").val();
                    var vin = $("#VIN").val();

                    $("#pp").html("<ul>")
                    $("#pp").html("<li>Make: " + make + "</li>" +
                                "<br/><li>Model: " + model + "</li>" +
                                "<br/><li>Year: " + year + "</li>" +
                                "<br/><li>VIN: " + vin + "</li>");
                    $("#pp").html("</ul>")
                }

                console.log("got here");

                $("#Register").click(function(){

                    writeHtml();
                    $("#myForm")[0].reset();                
                });

            });

        </script>
    </head>
    <body>
        <div>
            <form id = "myForm" method = "get">         
                <input id = "Model" placeholder = "Model"><br>
                <input id = "Make" placeholder = "Make"><br>
                <input id = "Year" type = "number" placeholder = "Year"><br>
                <input id = "VIN" placeholder = "VIN"><br>

                <button id = "Register" name = "Register"> Register</button>
                <button id = "Cancel" name = "Cancel">Cancel</button>
            </form>
            <p id = "pp">

            </p>
        </div>
    </body>
</html>

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")


萨比奥实践
$（文档）.ready（函数（）{
函数writeHtml（）{
var模型=$（“#模型”）.val（）；
var make=$（“#make”）.val（）；
var year=$（“#year”）.val（）；
var vin=$（“#vin”）.val（）；
$（“#pp”）.html（“”）
$（“#pp”）.html（“Make:+Make+””+

型号：“+Model+””+
“
年：“+年+””+
“
VIN:“+VIN+””；
$（“#pp”）.html（“”）
}
console.log（“到达这里”）；
$（“#注册”）。单击（函数（）{
writeHtml（）；
$（“#myForm”）[0]。重置（）；
});
});








登记
取消


  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

我只希望对DOM所做的编辑是永久性的。

因此我有两个问题。一个是在我第一次重写innerhtml之后，我再次重写了它

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

第二个问题是我没有为按钮指定类型。按钮的默认类型是“提交”，因为我的表单因此被提交，它将我重定向到页面的新页面。

因此我遇到了两个问题。一个是在我第一次重写innerhtml之后，我再次重写了它

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

第二个问题是我没有为按钮指定类型。按钮的默认类型为“提交”，因为我的表单因此被提交，它将我重定向到我页面的新页面。

您还应防止默认行为，您的事件订阅应如下所示：

    $("#Register").click(function(e) {
      e.preventDefault();
      writeHtml();
      $("#myForm")[0].reset();
    });

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

<button id = "Register" name = "Register" type="button"> Register</button>

您还应该防止默认行为，您的事件订阅应该如下所示：

    $("#Register").click(function(e) {
      e.preventDefault();
      writeHtml();
      $("#myForm")[0].reset();
    });

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

<button id = "Register" name = "Register" type="button"> Register</button>

您可以使用

html（）

覆盖您的内容，最好使用

append（）

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

您可以使用

html（）

覆盖您的内容，最好使用

append（）

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

如果不在表单中设置类型，则为提交；所以你应该设置按钮类型按钮；像这样：

    $("#Register").click(function(e) {
      e.preventDefault();
      writeHtml();
      $("#myForm")[0].reset();
    });

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

<button id = "Register" name = "Register" type="button"> Register</button>

寄存器

如果不在表单中设置类型，则为提交；所以你应该设置按钮类型按钮；像这样：

    $("#Register").click(function(e) {
      e.preventDefault();
      writeHtml();
      $("#myForm")[0].reset();
    });

  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

<button id = "Register" name = "Register" type="button"> Register</button>

寄存器


萨比奥实践
$（文档）.ready（函数（）{
函数writeHtml（）{
var模型=$（“#模型”）.val（）；
var make=$（“#make”）.val（）；
var year=$（“#year”）.val（）；
var vin=$（“#vin”）.val（）；
var htmlText=“”；
htmlText+=`Make:${Make}


模型：${Model}


年份：${Year}


VIN:${VIN}`；
htmlText+=“”
$（“#pp”）.append（htmlText）；
}
console.log（“到达这里”）；
$（“#注册”）。单击（功能（e）{
e、 预防默认值（）；
writeHtml（）；
$（“#myForm”）[0]。重置（）；
});
});








登记
取消


  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")


萨比奥实践
$（文档）.ready（函数（）{
函数writeHtml（）{
var模型=$（“#模型”）.val（）；
var make=$（“#make”）.val（）；
var year=$（“#year”）.val（）；
var vin=$（“#vin”）.val（）；
var htmlText=“”；
htmlText+=`Make:${Make}


模型：${Model}


年份：${Year}


VIN:${VIN}`；
htmlText+=“”
$（“#pp”）.append（htmlText）；
}
console.log（“到达这里”）；
$（“#注册”）。单击（功能（e）{
e、 预防默认值（）；
writeHtml（）；
$（“#myForm”）[0]。重置（）；
});
});








登记
取消


  $("#pp").append("<ul>")
                $("#pp").append("<li>Make: " + make + "</li>" +
                            "<br/><li>Model: " + model + "</li>" +
                            "<br/><li>Year: " + year + "</li>" +
                            "<br/><li>VIN: " + vin + "</li>");
                $("#pp").append("</ul>")

所以您正在重置一个表单，但不希望它被清除？不，先生，ul应该在表单下方，但我添加的关于ul的所有内容在“writeHtml”离开范围后消失，所以您正在重置表单，不希望它被清除？不，先生，ul应该在表单下方，但我添加的关于ul di的所有内容