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

Question

我试图通过使用 Domparser 将字符串转换为 html 并插入到 dom 元素中，但无法使用任何 css 分配 html，并且它与 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 之前对其进行解析。 您可以像对待任何普通字符串一样在纯 JS 中附加 HTML。

ctn.innerHTML = ctn.innerHTML + popupHTML

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