CODEWITHSUNDEEP
javascripthtmlcss
christan_dk
christan_dk

Reputation: 37

Append div class contain spesific class using javascript

I Have one problem , I have one div with dynamic class, but i want to append in that div,which contain class name "detail-news"
Example div :

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

class name music can dynamically change, but "detail-news" still there. I try with javascript , but i dont know how to append all div class contain class name "detail-news"

Here my javascript :

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

how to append all div class contain class name "detail-news" , not only "music-detail-news" ?

Upvotes: 1

Views: 13140

Answers (4)

DavidDomain
DavidDomain

Reputation: 15293

You can use querySelectorAll with attribute class ending with the substring detail-news and then forEach over the returned NodeList to append your div element.

Check out the 2. Selectors Overview

E[foo$="bar"]

an E element whose foo attribute value ends exactly with the string bar

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);
})
<div class="music-detail-news">
<!--- Some Content -->
</div>

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

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

Upvotes: 2

yousef sami
yousef sami

Reputation: 263

You can use querySelectorAll('div[class*=detail-news')

Selects every "div" element whose class attribute value contains the substring "detail-news"

Demo: 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);
  }
}

Upvotes: 1

cwurtz
cwurtz

Reputation: 3257

You can select using a partial class.

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

Will select any class that ends in "-detail-news"

Upvotes: 0

Dylan Meeus
Dylan Meeus

Reputation: 5802

Instead of using IDs, you indeed have to use class. An ID is unique, but a class is not, so when you get elements by their classname you get more than one element. They can also have more than one class. In this example, the second div will have two classes music-detail-news and detail-news.

Assuming that you have multiple divs with this class

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

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

You could get all of them using document.getElementsByClassName. 

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

Now you can apply the div to each element in the array 

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

Or if you'd want to append to only the divs with class music-detail-news, you'd write:

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

Upvotes: 0

Related Questions