javascript - Jquery append() append 内容，但由于某种原因它被自动删除？

Question

当我尝试 append 简单的“hello”时，它会被 append ，但很快就会自动删除。仅当我在下面给出的表单中使用它时，才会出现此问题，如果删除该表单，则不会出现问题，并且 hello 会正确 append 而无需删除。我无法理解此问题的正确原因，但这与我正在使用的表单有关。

 function addmore(){
        $("#mydiv").append("hello");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content"  style="overflow:hidden">
<h1>Register</h1>

<form action=" " method="post" autocomplete="on">
    <div class="col-md-6">
        <p>
            <label for="username" class="icon-user">User Name
                <span class="required">*</span>
            </label>
            <input type="text" name="txtName" placeholder="Enter unique username" /> 
        </p>

        <p>
            <label for="txt_real_name" class="icon-user">Name
                <span class="required">*</span>
            </label>
            <input type="text" name="txt_real_name" placeholder="Your Name" /> 
        </p>

        <p>
            <label for="userpassword" class="icon-pencil"> Password
                <span class="required">*</span>
            </label>
            <input type="password" name="txtPwd" placeholder="Password" />
        </p>


        <p>
            <label for="userpassword" class="icon-pencil">Re-Password
                <span class="required">*</span>
            </label>
            <input type="password" name="txtRePwd" placeholder="Reenter-Password" />
        </p>

        <p>
            <label for="qualification" class="icon-user"> Email
                <span class="required">*</span>
            </label>
            <input type="text" name="txtemail" placeholder="Your Email" /> 
        </p>
        <p>
            <label for="qualification" class="icon-user"> Qualification
                <span class="required">*</span>
            </label>
            <input type="text" name="txtQualif" placeholder="Your Qualification" />

    </div>

    <div class="col-md-6">
         <p>
            <label for="experience" class="icon-user"> Experience
                <span class="required">*</span>
            </label>
            <input type="text" name="txtExperience" placeholder="Your Work Experience" /> 
        </p>

        <p>


            <div id="mydiv"></div>
            <button onclick="addmore()">Add more</button>
        </p>

        <p>
            <label for="rdogender">Gender</label><br/>
            <div>Male <input type="radio" name="rdogender" value="female" checked="checked"/></div>
            <div>Female<input type="radio" name="rdogender" value="male"/></div>
        </p>
        <p>
            <label for="txtcity">City
                <span class="required">*</span>
            </label>
            <input type="text" name="txtCity" />
        </p>
    </div>

    <input type="submit" value="Submit" name="btnSubmit"/>
    <br/>
</form>

</div>

Answer 1

让您的按钮添加更多 type="button"，因为默认行为是提交，它将发布表单 > 并且它将以其默认状态显示。

<button onclick="addmore()" type="button">Add more</button>