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

原文 标签 javascript jquery html css dom

我想使用下面的这个小函数向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属性仍然是格式化的,而不仅仅是显示为纯文本。(在上面的示例中,“格式化”-单词变为粗体)`
在不大量更改“add”函数的情况下,如何避免这种文本格式?
我不能把密码改成
elem.innerText += element

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

最佳答案

您可以尝试使用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>

关于javascript - 添加元素时避免html格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49086319/

相关文章:

javascript - 为什么 jasmine-expect 没有验证是否抛出了错误?

jquery - 仅当满足特定条件时才运行jQuery函数

php - PHP根据动态下拉列表选择默认下拉列表

php - 用ajax加载表单并用jQuery提交

javascript - 如何在JQuery数据表的每一行中添加多个按钮,以及如何在其上应用事件

javascript - 使用润滑脂monkey解析JSONP响应(来自express.js服务器)客户端

javascript - Dropzone.js CSS

javascript - 动态元素自动完成

javascript - 物化滑动选项卡不适用于模式

html - 列表样式:无更改布局