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

【问题标题】：How do I convert string to html and insert into certain dom element?如何将字符串转换为 html 并插入到某些 dom 元素中？
【发布时间】：2020-10-20 15:31:47
【问题描述】：

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

    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)

【问题讨论】：

标签： javascript html jquery dom

【解决方案1】：

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

ctn.innerHTML = ctn.innerHTML + popupHTML

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

【讨论】：