Question

我有类似于这个函数的东西，其中task是一个包含一些用户定义属性的对象：

function addTask(list, task) {
    list.append('<li class="task-item">' + task.name + '<span>Some Other</span></li>');
}

这里的问题当然是值可能包含HTML，浏览器会将其呈现为这样。是否可以强制task.name在附加内部解析为纯文本？

注意：请参阅以下答案中的一个解决方案。

编辑：在<li>中添加了一些相关的HTML。有关详细信息，请参阅下面的答案。

Answer 1

用HTML实体<替换少于标志（＆lt;）：

＆＃13;

function addTask(list, task) {
  list.append('<li class="task-item">' + task.name.replace(/</g,'&lt;') +
              '<span>Some Other</span></li>'
             );
}

addTask($('ul'),{name: '<a>This is a task</a> '});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  
</ul>

＆＃13;

Answer 2

更新的解决方案：

function addTask(list, task) {
    list.append('<li class="task-item"></li>'); // dont include the text or inner html yet
}

$el = $('li:last-child', list); 
$el.text(task.name); // force plain text
$el.append('<span>Some Other</span>');

这解决了text()方法覆盖我的内部html内容。有用。但仍然对其他想法持开放态度。

Answer 3

[已更新] ：请尝试以下代码：

function addTask(list, task) {
    list.append('<li class="task-item"><pre>' + task.name + '</pre></li>');
}

JQuery强制在变量里面添加纯文本追加

3 个答案: