Jquery append（）会附加内容，但出于某种原因，它会被自动删除？

Question

当我尝试附加简单的“hello”时，会附加它，但不久之后会自动删除。只有当我在下面给出的表单中使用它时才会出现此问题，如果我删除表单然后没有问题发生并且hello被正确附加而没有删除。我在理解这个问题的正确原因时遇到了问题，但它与我正在使用的表格有关。

 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

按下您的按钮Add More type="button"，因为默认行为为submit，会发布form，并会显示在default state。

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

Answer 2

由于按钮的默认类型submit，会出现问题，因为它会导致重新加载页面，从而删除其中动态添加的内容。使用e.preventDefault();停止页面刷新

＆＃13;

＆＃13;

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

＆＃13;

<div id="content"  style="overflow:hidden">
<h1>Register</h1>
<form action=" " method="post" autocomplete="on" id="myForm">
    <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(event)">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>

＆＃13;

＆＃13;

＆＃13;