Injecting text into a div

Question

I'm trying to inject the ➕ emoji (acting as a button) next to each message on a website. Example:

This is what I'm currently doing:

contentscript.js:

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

This isn't showing anything. I also presume it won't show to the complete left; how can I do this?

getElement**s**ByClassName returns a collection of elements that you need to loop over. — Alex K., Jun 13 '17 at 15:32
if you have only one element with className you can try like this document.getElementsByClassName("className")[0].innerHTML = "➕"; — Dinesh undefined, Jun 13 '17 at 15:34
For example: [JS: iterating over result of getElementsByClassName using Array.forEach](https://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach) — Alex K., Jun 13 '17 at 15:39
Okay, thank you guys so much. So now it's working but it's replacing the completely div. Is there a way how i can append it or just add it to the left of the div? — KidCoder, Jun 13 '17 at 15:50
how about `document.getElementsByClassName("className")[0].innerHTML += "➕";` — happymacarts, Jun 13 '17 at 16:01
@happymacarts, That is a *bad* way to do things. Generally, you should not be manipulating the `innerHTML` property. What you have done *completely* replaces all the HTML in the element you have selected. As it is completely new DOM elements, any event listeners which used to be on those elements no longer exist. In addition, it may cause a complete re-render of that area of the page, or more. For a case like this, you should use `Element.insertAdjacentHTML('beforeend', '➕');` — Makyen, Jun 13 '17 at 18:16
@Makyen interesting, what does the 'beforeend' mean? Do i need to replace it with something? — KidCoder, Jun 13 '17 at 18:31
The [`beforeend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML#Syntax) means to insert the HTML before the end of the element you are calling the [`.insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) method on (i.e. "Just inside the element, after its last child."). You can alternately use `beforebegin`, `afterbegin`, or `afterend`. In your case, from the image it looks like you would want to use `beforebegin`, or `afterbegin`, depending on what the HTML you're inserting into actually looks like. — Makyen, Jun 13 '17 at 18:36
Please provide an example of the HTML into which you are wanting to insert the emoji. Please also provide an example of what you want the overall HTML to look like. Also, are you wanting to add this to only a single div, or all the divs that have the `class` `className`? — Makyen, Jun 13 '17 at 18:43
@Makyen thank you! I'm going with your solution. If you'd like, please go ahead and document ur solution as an answer. I'll be happy to accept it. — KidCoder, Jun 16 '17 at 09:29

happymacarts · Accepted Answer · 2017-06-13T16:23:00.467

If there is only one item in the DOM with the class name you want to add the item to you could do this

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

Using the += operator will append the new value to the current value of the innerHTML

Otherwise you would have to loop over the collection of elements returned (see @Alex K comment above)

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>

Appending to `Element.innerHTML` is a *bad* way to accomplish this. Generally, you should avoid manipulating the `innerHTML` property. What you have done *completely* replaces all the HTML in the element you have selected. As it is completely new DOM elements, any event listeners which used to be on those elements no longer exist. In addition, it may cause a complete re-render of that area of the page, or more. For a case like this, you should use `Element.insertAdjacentHTML('beforeend', '➕');` — Makyen, Jun 13 '17 at 18:18
@Mayyen i can agree with that. i typically use jquery on('click',...) so the re-rendering is not an issue. — happymacarts, Jun 13 '17 at 20:57

Injecting text into a div

1 Answers1