Question

使用类向网站添加元素

2017-09-30

62

javascript userscripts tampermonkey

我想制作一个用户脚本，用于向页面添加元素（假设是一个按钮，尽管我一开始添加任何东西都遇到了麻烦）。

所以我有一个带有非常长的 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 （并且您不应该仅仅为了这个目的而添加它），您可以使用以下简单的代码片段。有关将一个元素插入 DOM 中另一个元素之前的更多信息，请参阅 Mozilla 开发者网站。

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> 标签前添加一个元素，可以使用以下代码片段（请注意，根据 Mozilla 开发者网络 ):

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...);

Peter

2017-09-30

Answer 3

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

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