1

Question should not have been closed. It's not about grabbing elements by className. You need to check that there is no id. Please reopen.

<div class="car">...</div>
<div class="car">...</div>
<div class="car">...</div>

Somewhere in my HTML code there are div tags with a specific class, like car. But they do not have an id selector. I am trying to print all of their innerHTML in a row but I can't use the code document.getElementById("car").innerHTML. How can I achieve this? Thanks

darkchampionz
  • 1,174
  • 5
  • 24
  • 47
  • 1
    `document.getElementsByClassName("car")` will return an array of all divs in DOM with the class name "car" – jrend Jan 11 '23 at 20:55
  • 1
    @jrend it'll actually return an array of all elements with class "car", which is not necessarily just "div" elements. – Tibrogargan Jan 11 '23 at 21:09
  • [Did you do any research?](https://meta.stackoverflow.com/a/261593/4665) – Jon P Jan 11 '23 at 21:10

5 Answers5

1

Select all the div, with querySelectorAll(). This method return an array like object, I convert it to an array with Array.from(), in this way I can use reduce (method of arrays) method to concatenate all the items of array. Finally I write the string into an output div

const divs = document.querySelectorAll("div.car")
const result = Array.from(divs).reduce((accumulator,currentValue)=> accumulator+=currentValue.innerHTML,'')

document.querySelector('.row-output').textContent = result;
<div class="car">First div</div>
<div class="car">Second div</div>
<div class="car">Third div</div>

<div class="row-output"></div>

Another way could be this:

    const divs = document.querySelectorAll("div.car")
    const result = Array.from(divs,item => item.innerHTML).join('');
    document.querySelector('.row-output').textContent = result;
Nick
  • 1,439
  • 2
  • 15
  • 28
1

let cars = document.getElementsByClassName('car')

let html = "";
for (let i = 0; i < cars.length; i++) {
  if(cars[i].getAttribute('id') == null && cars[i].tagName == "DIV")html += cars[i].innerHTML;
}

document.getElementById('output').innerHTML = html
<div class="car">1...</div>
<div id='x' class="car">.2.</div>
<p class="car">..3</p>
<div class="car">..4</div>


<div id='output'></div>
DCR
  • 14,737
  • 12
  • 52
  • 115
0

You can select with querySelectorAll or getElementsByClassName

const elements = Array.from(document.querySelectorAll(".car"))
console.log(elements.map(el => el.innerHTML).join(''))
<div class="car"><span>a</span></div>
<div class="car"><div>b</div></div>
<div class="car"><strong>c</strong></div>
Nikita Skrebets
  • 1,518
  • 2
  • 13
  • 19
  • Maybe wouldn't use `getElementsByClassName` as you would have to post process to remove anything that isn't a `div` – Tibrogargan Jan 11 '23 at 21:05
0

You want to query for all the div's with that class. That will return a node list. You then need to iterate over that node list, handling the innerHTML of each once.

const elements = document.querySelectorAll(".car");
const outputDiv = document.getElementById("output");
elements.forEach( function (node) {
  outputDiv.appendChild(document.createTextNode(node.innerHTML));
});
<div class="car">this </div>
<div class="car">is </div>
<div class="car">a test. </div>

<div id=output></div>
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
0

The CSS selector you really want is this: div.car:not([id]). This will return only div elements that have class "car" and do not have id set.

console.log(Array.from(document.querySelectorAll('div.car:not([id])'), ({innerHTML}) => innerHTML).join(''))
<div class="car">this </div>
<div class="car">is </div>
<div id="two" class="car">not </div>
<div class="car">correct </div>
<span class="car">these </span><br />
<span id="one" class="car">spans</span>
Tibrogargan
  • 4,508
  • 3
  • 19
  • 38