Jquery append() appends the content but for some reason it is being removed automatically?

Question

When I am trying to append simple "hello" it is appended but it is removed shortly afterwards automatically. This problem occurs only when I use it in my form given below, if I remove the form then no problem occurs and hello is appended correctly with no removal. I am having problem understanding the right cause of this problem but it has something to do with the form I am using.

 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

The problem occurs because of the default type submit of button, as it causes the reload of the page thus removing the dynamically added content in it. use e.preventDefault(); to stop page refresh

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

<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>

Answer 2

Make your button Add More type="button" because default behavior is submit which will post the form and it will be shown in its default state.

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