javascript - 添加元素时避免html格式化

Question

我想使用下面的这个小函数向 HTML DOM 添加一个元素:

function add() {
  var text = "this is a <b>formatted</b> test"
  var element = "<div style='background: red;'>\
                    <a href='#'>" + text + "</a>\
                  </div>"
  elem.innerHTML += element
}

add();

到目前为止我得到了什么:

<div id="elem"></div>

<p style="margin-top: 10%">This is what it should look like (of course no blanks):</p>

<div style="background: red;">
    <a href='#'>
      this is a < b >formatted< / b > test
    </a>
</div>

通过更改 text 属性，可以更改此元素上的文本。但是，HTML 属性仍然是格式化的，而不是仅仅将它们显示为纯文本。 (在上面的示例中，“格式化”字变为粗体)`

How can I avoid this text-formatting without massively changing my "add"-function?

我不能把代码改成

elem.innerText += element

因为这会杀死所有样式属性(如 background-color 等)

Answer 1

你可以试试xmp标签

function add() {
  var innerText = "this is a <xmp><b></xmp>formatted<xmp></b></xmp> test"
  var element = "<div style='background: red;'>\
                    <a href='#'>" + innerText + "</a>\
                  </div>"
  elem.innerHTML += element
}


add()

xmp {
  display: inline-block;
}

<div id="elem"></div>