LW001 LW001 - 3 years ago 139
Javascript Question

Adding an element to a website using classes

Having done an extensive amount of research through Google and SO I couldn't find a way to solve my problems.

What I'm trying to make is a userscript that adds an element to a page (Presume a button, though I'm having trouble adding anything in the first place).

So I have a website with a really long DOM Structure and most elements use classes. The structure is as follows:

<body class="...">
<div class="pageContainer">
<div class="container body">
<div class="row">
<div class="col-8">
<article>
<section class="forumIndex">
<ol class="list list-ideas">
<li class="listItem idea idea-list">
<div class="uvIdeaVoteBadge">


Now I want to add something before the
<div class="uvIdeaVoteBadge">
, though can't figure out how to.

Answer Source

If you cannot use jQuery (and you shouldn't add it just for that purpose), you can use the following simple code snippet. Further information about inserting an element into the DOM before another element can be found on the Mozilla Developer website.

var newElement = document.createElement('div');
var afterElement = document.querySelector('.uvIdeaVoteBadge');
var parentElement = afterElement.parentNode;

parentElement.insertBefore(newElement, afterElement);

Here is an executable example:

document.querySelector('button').addEventListener('click', function () {
  var newElement = document.createElement('span');
  var afterElement = document.querySelector('.uvIdeaVoteBadge');
  var parentElement = afterElement.parentNode;

  parentElement.insertBefore(newElement, afterElement);
});
.parent-element {
  border: 1px solid red;
  padding: 5px;
}
.parent-element span {
  width: 10px;
  height: 10px;
  margin: 2px;
  background-color: blue;
  display: inline-block;
}
.uvIdeaVoteBadge {
  background: green;
  display: inline-block;
}
<div class="parent-element">
  <div class="uvIdeaVoteBadge">.uvIdeaVoteBadge</div>
</div>

<button>add element before .uvIdeaVoteBadge</button>


Adding Multiple New Elements (addition from comments)

If you want to add a single element in front of every <li> tag, you can use the following snippet (beware, that only <li>s can be used inside a <ul> or <ol> according to the Mozilla Developer Network):

var allListElements = document.querySelectorAll('li');
allListElements.forEach(function (afterElement) {
   var newElement = document.createElement('div');
   var parentElement = afterElement.parentNode;
   parentElement.insertBefore(newElement, afterElement);
});

Here is an executable example:

document.querySelector('button').addEventListener('click', function () {
  var allListElements = document.querySelectorAll('li');
  allListElements.forEach(function (afterElement) {
    var newElement = document.createElement('li');
    newElement.classList.add('new');
    var parentElement = afterElement.parentNode;
    parentElement.insertBefore(newElement, afterElement);
  });
});
.parent-element {
  border: 1px solid red;
  padding: 5px;
}
.parent-element li {
   color: white;
   width: 100px;
   height: 20px;
   background: green;
}
.parent-element li.new {
   background: blue;
}
<ul class="parent-element">
  <li>old element 1</li>
  <li>old element 2</li>
</div>

<button>add new li in front of every li</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download