html中元素动态添加与删除

关注

原创最新推荐文章于 2026-05-22 09:13:55 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

JavaScript动态改变HTML页面元素例如添加或删除 HTML页面元素可以通过js动态改变，比如可以向HTML中添加元素或删除某个元素，下面为示例代码，感兴趣的朋友不要错过立即下载

<div class="unit" >
                <label>产品参数</label>       
                <input type="button" value="添加" onclick="addProductParam()"/>         
            </div> 
            
            <div id="paramDiv">
            <c:forEach items="${list}" var="item" varStatus="s">
                <div class="unit">
                <input type="text" name="param_key_input" size="30" value="${item.pkey }"/>
                <input type="text" name="param_value_input" size="30" value="${item.pvalue }"/>  
                <input type="button" value="添加" onclick="addProductParam()"/>  
                <input class="input_param" type="button" value="删除"/>  
                </div> 
            </c:forEach>
            </div>

<script>
function addProductParam(){
    
    var addcontent = '';
    addcontent += '<div class="unit"> <input type="text" name="param_key_input" size="30" class="textInput"/><input type="text" name="param_value_input" size="30" class="textInput"/><input type="button" value="添加" onclick="addProductParam()"/><input class="input_param" type="button" value="删除"/>  </div> ';
    $("#paramDiv").append(addcontent);
}

$('.input_param').bind('click',function(){
       $(this).parent().remove(); 
})
</script>

收录于