添加元素时避免使用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属性仍然是格式化的，而不是仅仅将它们显示为纯文本。 （在上面的例子中，“格式化”字变为粗体）`

如何在不大幅更改“添加”功能的情况下避免此文本格式化？

我无法将代码更改为

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>

Answer 2

理想情况下，您只需为innerText设置a，然后使用JavaScript将其附加到elem。

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


add()

What I got so far:
<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>

或者使用jQuery的构造函数（$("<a>", {text: innerText, href: '#'})）来简化它。

function add() {
  var innerText = "this is a <b>formatted</b> test"
  
  var a = $("<a>", {text: innerText, href: '#'});
  
  var element = "<div style='background: red;'></div>"
  $(elem).html(element);
  $(elem).append(a);
}


add()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
What I got so far:
<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>

但...

An escaping problem

你的问题实际上是逃避这些字符串的问题。使用jQuery，这可以通过以下方式实现。

没有换过var text = ...的线路。 elem.innerHTML += element仍然存在。

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

add()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
What I got so far:
<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>