访问 innerHTML 中的 html 标签 | javascript

Question

我正在尝试从此处的 innerHTML 内的 class 创建变量：

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++;
      });

例如，我想在这个 innerHTML 中定位rule-body class 并更改它的背景

像这样：

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

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

但这不起作用，我收到此错误：

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

Answer 1

您必须在 innerHTML 之后访问.rule-body并确保它确实在 DOM 中。 然后，这应该可以正常工作：

 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>

Answer 2

您可以为此使用 DOMParser

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++;
});

此外，如果计数器是 ruleData 的索引，您也可以使用 forEach 的索引。 (rule,i)=>{

Answer 3

我建议 map 和委托

 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>