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>