I have html that contains many paragraph tags with an id such as the following:
<p id="123">some text</p>
What I want to do, is to display the id value within the p tag, preferably bolded.
So the above would create html of:
<p id="123"><b>123</b>: some text</p>
Any code samples that I have seen so far require that you already know the id or class value.
How do I do this with JavaScript? Thank you.
Select all the p elements using querySelectorAll("p") and then iterate over the returned collection and set the content of each p element using the .innerHTML property.
To set the content of each p element correctly, you need to concatenate the contents of each p element with its id. To make the id bold, you can wrap it in strong tag.
const pTags = document.querySelectorAll('p');
pTags.forEach(p => {
p.innerHTML = `<strong>${p.id}: </strong>${p.textContent}`
});<p id="123">Some Text</p>
<p id="456">Some Text</p>
<p id="789">Some Text</p>
`?