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（并且您不应仅为此目的添加它），则可以使用以下简单的代码段。有关在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>代码前添加一个元素，可以使用以下代码段（请注意，<li>内只能使用<ul>或根据{{3}}} <ol>：

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>

Answer 2

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

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

Answer 3

不确定这是否有帮助，但有一个：在伪类之前

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

使用类向网站添加元素

3 个答案:

添加多个新元素（从评论中添加）