在原有元素後追加新元素，但是追加時會先移除掉加過的元素再重新新增
阿新 • • 發佈：2018-12-21
一、需要實現的效果，如下圖顯示
點選按鈕前
點選按鈕後
二、程式碼實現
思路：每次新增的時候需要對剛剛追加的元素儲存到一個變數中（寫法1），或者給剛剛追加的元素新增標記（如id這種唯一性標識）（寫法2）
寫法1：
<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function(){ var inputElement = ""; $("button").click(function(){ // 插入的標題 if (inputElement) inputElement.remove(); inputElement= $("<input value='測試'/>").insertAfter($("#pElement")); }); }); </script> </head> <body> <p id="pElement">這是一個段落。</p> <button>在p 元素之後加入一個輸入框</button> </body> </html>
寫法2：
在$(function...)部分的程式碼還可以寫成，
$(function(){
$("button").click(function(){
// 插入的標題
$("#test").remove();
$("#pElement").after("<input id='test' value='測試'/>");
});
});