Print innerHTML of only div elements with particular class and no id-CodePudding

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 >...</div>
<div >...</div>
<div >...</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

CodePudding user response：

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 >1...</div>
<div id='x' >.2.</div>
<p >..3</p>
<div >..4</div>


<div id='output'></div>

CodePudding user response：

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 >First div</div>
<div >Second div</div>
<div >Third div</div>

<div ></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;

CodePudding user response：

You can select with querySelectorAll or getElementsByClassName

const elements = Array.from(document.querySelectorAll(".car"))
console.log(elements.map(el => el.innerHTML).join(''))

<div ><span>a</span></div>
<div ><div>b</div></div>
<div ><strong>c</strong></div>

CodePudding user response：

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 >this </div>
<div >is </div>
<div >a test. </div>

<div id=output></div>

CodePudding user response：

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 >this </div>
<div >is </div>
<div id="two" >not </div>
<div >correct </div>
<span >these </span><br />
<span id="one" >spans</span>