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

我试图使用Domparser将字符串转换为html并插入到dom元素中，但是html不能用任何css赋值，而且JQuery也能正常工作。我想知道为什么？

var ctn=document.body.querySelector（“.container”）
var popupHTML=`
标题
内容
`
//1.使用DOMParser
popupHTML=new DOMParser（）.parseFromString（popupHTML，“text/xml”）
popupHTML=popupHTML.querySelector（'.bx popup ctn'）
ctn.append（popupHTML）
// 2. 使用JQuery
//$（“.container”）.append（popupHTML）

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

ctn.innerHTML=ctn.innerHTML+popupHTML

这里有一个你可能会觉得有用的链接

    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)