Javascript 通过onclick添加/删除元素

我有一个用纯JS编写的chrome扩展，它基本上由将数据附加到页面链接的函数组成

函数的一个示例，它基本上只是将一个click整数附加到从另一个函数传入的link元素上：

function addCounttoLinks(link, counts) {
    var clicks = counts.split(":")[1].split(",")[0].trim();
    var count = document.createTextNode((" (" + clicks + ")"));
    var dspan = document.createElement("span");
    dspan.appendChild(count);
    dspan.style.fontSize = "10px"; dspan.style.textAlign = "center";
    link.appendChild(dspan); 
} 

---

执行/取消执行这些函数的最有效方式是什么，这样我就可以实现一个“开/关”按钮供用户单击，该按钮将添加/删除扩展附加的数据。是否是编写函数以删除先前创建的元素的唯一解决方案

在

span

上放置一个类（比如，

我的漂亮扩展名extra

-您希望它不太可能与其他内容冲突），然后在隐藏数据时向

正文添加一个类（比如，
隐藏我的漂亮扩展名
），并在显示数据时将其删除。然后使用此样式规则：

body.hide-my-nifty-extension span.my-nifty-extension-extra {
    display: none;
}

例如，就在您的
附件子项之前：

dspan.className = "my-nifty-extension-extra";

然后：

function showExtraData() {
    document.body.classList.remove('hide-my-nifty-extension');
}

function hideExtraData() {
    document.body.classList.add('hide-my-nifty-extension');
}

（编写Chrome扩展的乐趣之一是你知道你有类似于
classList
）的东西，
向额外的元素添加一个类。然后修改该类的样式规则，使该类的所有元素都可见或不可见。这真的是一个chrome扩展吗？