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

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

• javascript
• html
• css

• Could you use to set multiple classes? <div class="music detail-news"> – Little Santi Commented Aug 29, 2016 at 14:05
• getElementById('music-detail-news') won't work if you don't have id="music-detail-news" in the HTML. – BCDeWitt Commented Aug 29, 2016 at 14:07

4 Answers 4

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>

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

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

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

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

You can select using a partial class.

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

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