动态创建和移除HTML标签

1、w3school定义

添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

2、创建HTML实例

//创建元素
function createTableElement(){
    if(OPERATE_OPRION.channelInputIndex<7){
        var table=$("#tabel_add_channel");
        var index=OPERATE_OPRION.channelInputIndex+1;
        var elements=" <tr id='row_"+index+"'>"
                   +"<td align='right' >频道名称"+index+"：</td>"
                   +"<td><input type='text' id='add_channel_name_"+OPERATE_OPRION.channelInputIndex+"'  style='width:160px;' data-options='required:true' />&nbsp;<a href='javascript:void(0)' onclick='removeTableElement("+index+")'>移除</a></td>"       
                   +"</tr>";
        table.append(elements);
        OPERATE_OPRION.channelInputIndex++;
    }else{
        $.messager.alert('添加输入框消息', "已经到达添加上限，不能再继续添加");
    }
}

 

3、移除HTML实例

//移除创建的元素
function removeTableElement(index){
    $("tr","#tabel_add_channel").each(function(){
        var idStr=$(this).attr("id");
        var ss=idStr.split("_");
        var id=parseInt(ss[1]);
        if(id==index){
            $(this).remove();
            OPERATE_OPRION.channelInputIndex--;
        }
    });
}