【问题标题】：Avoid html formatting when adding elements添加元素时避免使用html格式
【发布时间】：2018-08-11 16:23:55
【问题描述】：

我想使用下面的这个小函数向 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等）

【问题讨论】：

'通过改变“innerText”' - 你显然没有做什么：elem.innerHTML += element O.o
因为elem.innerText 会杀死样式属性！这是关于“文本”变量@Andreas
你只需要将字符串中的 HTML 转义即可。见Escaping HTML strings with jQuery

标签： javascript jquery html css dom

【解决方案1】：

理想情况下，您应该仅为a 设置innerText，然后使用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>

但是……

一个逃避问题

您的问题实际上是转义这些字符串的问题。使用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>

【讨论】：

【解决方案2】：

你可以试试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;
}

&lt;div id="elem"&gt;&lt;/div&gt;

【讨论】：

你可以添加类到a来添加样式
我不想添加样式，我想避免 XMP 标签正在改变这些！