Question

我有一个问题，我有一个带有动态类的div，但我想在该div中附加，其中包含类名“detail-news”
示例div：

<div class="music-detail-news">
<!--- Some Content -->
</div

类名音乐可以动态改变，但“细节 - 新闻”仍然存在。我尝试使用javascript，但我不知道如何附加所有div类包含类名“detail-news”

这是我的javascript：

function appenddiv() {
var div = document.createElement('div');
div.className = 'append_test';
document.getElementById('music-detail-news').appendChild(div);
}

如何追加所有div类包含类名“detail-news”，而不仅仅是“music-detail-news”？

Answer 1

您可以使用querySelectorAll，其中属性类以子字符串detail-news结尾，然后forEach覆盖返回的NodeList，以附加div元素。

查看2. Selectors Overview

<强> E [FOO $ =＆＃34;杆＆＃34;]

一个E元素，其foo属性值与字符串bar
完全结束

＆＃13;

var detailsNews = document.querySelectorAll('div[class$="detail-news"]');

detailsNews.forEach(function(item) {
  var div = document.createElement('div');
  div.className = 'append_test';
  div.textContent = "appended div to " + item.classList;
  item.appendChild(div);
})

＆＃13;

<div class="music-detail-news">
<!--- Some Content -->
</div>

<div class="food-detail-news">
<!--- Some Content -->
</div>

<div class="health-detail-news">
<!--- Some Content -->
</div>

＆＃13;

Answer 2

您可以使用querySelectorAll（'div [class * = detail-news'）

选择其class属性值包含的每个“div”元素 substring “detail-news”

演示：https://jsfiddle.net/yzw11ok1/1/

function appenddiv() {
  var elements = document.querySelectorAll('div[class*="detail-news"');
  for(var k in elements){
  var div = document.createElement('div');
  div.className = 'append_test';
  elements[k].appendChild(div);
  }
}

Answer 3

您必须使用类，而不是使用ID。 ID是唯一的，但是类不是，因此当您通过类名获取元素时，您将获得多个元素。他们也可以有多个班级。在此示例中，第二个div将包含两个类music-detail-news和detail-news。

假设你有这个类的多个div

 <div id="firstdiv" class="music-detail-news">
 <!--- Some Content -->
 </div

  <div id="seconddiv" class="music-detail-news detail-news">
 <!--- Some Content -->
 </div

您可以使用document.getElementsByClassName获取所有这些内容。

var elements = document.getElementsByClassName("detail-news");

现在您可以将div应用于数组中的每个元素

var div = document.createElement("div");
for(var i = 0; i < elements.length; i++){
  elements[i].appendChild(div);
 }

或者，如果您只想附加类music-detail-news的div，您可以写：

var elements = document.getElementsByClassName("music-detail-news");
for(var i = 0; i < elements.length; i++){
   elements[i].appendChild(div);
}

Answer 4

您可以选择使用部分类。

document.querySelectorAll("[class$=-detail-news]");

将选择以“-detail-news”结尾的任何课程

使用javascript追加div类包含特定类

4 个答案: