通过js给某个标签添加内容或者删除标签

添加内容

//先保存div中原来的html
var tag = document.getElementById("tag").innerHTML;
//构造新的内容
var couhtml = '<select id="options" name="options" class="form-control input-ssm"><option value = "0" > 请选择</option></select><button type="button" style="margin-left: 4px;" class="btn btn-primary btn-sm" id="cde2" onclick="addOption()">删除</button>';
//追加内容
document.getElementById("tag").innerHTML = tag + couhtml;

删除标签

//某个标签
var tag = document.getElementById("tag");
//删除
tag.parentNode.removeChild(tag);

完整的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="tag">我是div中的文字，后面的内容是js追加的，不关我的事</div>
<script>
    //先保存div中原来的html
    var tag = document.getElementById("tag").innerHTML;
    //构造新的内容
    var couhtml = '<select id="options" name="options" class="form-control input-ssm"><option value = "0" > 请选择</option></select><button type="button" style="margin-left: 4px;" class="btn btn-primary btn-sm" id="cde2" onclick="addOption()">删除</button>';
    //追加内容
    document.getElementById("tag").innerHTML = tag + couhtml;

    /*//某个标签
    var tag = document.getElementById("tag");
    //删除
    tag.parentNode.removeChild(tag);*/
</script>
</body>
</html>
posted @ 2020-08-28 16:01  碧水云天4  阅读(4943)  评论(0)  编辑  收藏  举报