get access to html tags inside innerHTML | javascript

Question

I'm trying to create variable from a class inside the innerHTML down here:

ruleData.forEach((rule) => {
        rulesWrapper.innerHTML += `
        <div class='rule'>
          <div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
            <div>
              <p>${counter}.</p>
              <p>${rule.title}</p>
            </div>
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class='rule-body'>
            <p>${rule.body}</p>
          </div>
        </div>
      `;
        counter++;
      });

For example I want to target rule-body class inside this innerHTML and change it's background

like this:

let ruleBody = document.querySelectorAll('.rule-body');

ruleBody[0].style.background = 'red';

But this doesn't work ,I get this error:

TypeError: Cannot read properties of undefined (reading 'style')

Duplicate: Why does jQuery or a DOM method such as getElementById not find the element? — user5734311
– user5734311, Commented Aug 6, 2022 at 8:47

CleverSkull · Accepted Answer · 2022-08-06 08:52:14Z

You can use DOMParser for this

ruleData.forEach((rule) => {
    let rule_html = `
        <div class='rule'>
            <div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
                <div>
                    <p>${counter}.</p>
                    <p>${rule.title}</p>
                </div>
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class='rule-body'>
                <p>${rule.body}</p>
            </div>
        </div>
    `;
    let rule = new DOMParser().parseFromString(rule_html,"text/xml").firstChild;
    rule.querySelector('.rule-body').style.background = 'red';
    rulesWrapper.appendChild(rule);
    counter++;
});

Also if the counter is the index of the ruleData you can use forEach's index as well. (rule,i)=>{

ThomasG2201 · Accepted Answer · 2022-08-06 09:23:22Z

1

You must access the .rule-body after the innerHTML and make sure it is indeed in the DOM. Then, this should work perfectly fine:

const container = document.querySelector("#container");
const button = document.querySelector("#button");

function exec() {
  container.innerHTML = `<div class='rule-body'>yo</div>`;
  const ruleBody = document.querySelectorAll('.rule-body');
  ruleBody[0].style.backgroundColor = 'red';
}

button.onclick = exec;

<div id="container">
  
</div>

<button id="button">
    CLICK TO INSERT
</button>

edited Aug 6, 2022 at 9:23

answered Aug 6, 2022 at 8:40

ThomasG2201

91713 silver badges35 bronze badges

1 Comment

Navid Azimi Over a year ago

I should've given more info on this.but this innerHTML renders after the user clicks on a button.

mplungjan · Accepted Answer · 2022-08-06 09:36:26Z

I suggest to map and delegate

const ruleData = [{"title":"Title 1","body":"This is the body"},{"title":"Title 2","body":"This is the body"}]
const rulesWrapper = document.getElementById("rulesWrapper");
rulesWrapper.innerHTML = ruleData.map((rule,i) => `
        <div class='rule'>
          <div class='rule-title' data-idx='${i}'>
            <div>
              <p>${i}.</p>
              <p>${rule.title}</p>
            </div>
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class='rule-body'>
            <p>${rule.body}</p>
          </div>
        </div>
      `).join("");

rulesWrapper.addEventListener("click", function(e) {
  const tgt=e.target.closest(".rule-title");
  if (tgt) console.log(tgt.dataset.idx)
})

<div id="rulesWrapper"></div>

Collectives™ on Stack Overflow

get access to html tags inside innerHTML | javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related