javascript - 如何将字符串转换为 html 并插入到某些 dom 元素中？

Question

我试图将字符串转换为 html 并使用 Domparser 插入到 dom 元素中，但 html 不能用任何 css 分配，它适用于 JQuery。我想知道为什么？ 安慰

    var ctn = document.body.querySelector('.container')
    var popupHTML = `
      <div class="bx-popup-ctn">
        <div class="bx-popup-header-ctn">header</div>
        <div class="bx-popup-content-ctn">
          <div class="bx-popup-content">  
            content
          </div>
        </div>
      </div>
    `
    // 1.using DOMParser
    popupHTML = new DOMParser().parseFromString(popupHTML,"text/xml")
    popupHTML = popupHTML.querySelector('.bx-popup-ctn')
    ctn.append(popupHTML)
    // 2. using JQuery
    // $(".container").append(popupHTML)

Answer 1

在将 HTML 添加到 DOM 之前，无需解析 HTML。您可以在纯 JS 中附加 HTML，就像对待任何普通字符串一样。

ctn.innerHTML = ctn.innerHTML + popupHTML

这是一个您可能会发现有用的链接 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML