使用类向网站添加元素

Question

我想做的是一个用户脚本，它可以将一个元素添加到页面（假设是一个按钮，尽管我一开始就无法添加任何东西）。

所以我有一个非常长 DOM 结构的网站，大多数元素使用类。结构如下：

<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">

现在我想在 <div class="uvIdeaVoteBadge"> 之前添加一些内容，但不知道如何添加。

Answer 1

如果你可以使用 jQuery 那么这应该可以工作

$('.uvIdeaVoteBadge').before(something...);

Answer 2

不确定这是否有帮助，但是有一个 :before 伪 class

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Answer 3

如果您不能使用 jQuery（并且您不应该仅仅为了这个目的而添加它），您可以使用以下简单的代码片段。在 Mozilla Developer website.

上可以找到有关在另一个元素之前将元素插入 DOM 的更多信息

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

parentElement.insertBefore(newElement, afterElement);

这是一个可执行的例子：

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>

添加多个新元素（来自评论的添加）

如果你想在每个 <li> 标签前添加一个元素，你可以使用下面的代码片段（注意，在 [=21= 中只能使用 <li>s ] 或 <ol> 根据 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);
});

这是一个可执行的例子：

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>

使用类向网站添加元素

Adding an element to a website using classes

javascript

userscripts

tampermonkey

添加多个新元素（来自评论的添加）

使用 类 向网站添加元素

Adding an element to a website using classes

javascript

userscripts

tampermonkey

添加多个新元素（来自评论的添加）

使用类向网站添加元素