将文本注入div

Question

我试图在网站上的每条消息旁注入➕表情符号（充当按钮）。示例：

。

这就是我目前正在做的事情：

contentscript.js：

document.getElementsByClassName("className").innerHTML = "➕";

这不显示任何内容。我也认为它不会显示完整的左边;我怎么能这样做？

Answer 1

如果DOM中只有一个带有类名的项目，您想要将项目添加到您可以执行此操作

  document.getElementsByClassName("className")[0].innerHTML += "➕";

使用+=运算符会将新值附加到innerHTML的当前值

否则你必须遍历返回的元素集合（参见上面的@Alex K评论）

document.getElementsByClassName("className")[0].innerHTML += "<span class='icon'>➕</span>";

document.getElementsByClassName("icon")[0].addEventListener("click", clickFunction);


function clickFunction(){
  alert("Clicked"+ this);
}

/* add whatever styles you need here */
.className {
    position: relative;
    padding-left: 20px;
}

.icon {
    color: red;
    position: absolute;
    top: 0;
    left: 0;
}

<div class="className">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis non quam non tristique. Cras ut imperdiet quam, pellentesque finibus nisl. Sed egestas dapibus turpis a rhoncus.</div>