Javascript 当我键入代码时，动态区域不会将代码显示为文本

例如，当我在文本区域中键入

时，它不会将

显示为文本，而是显示一个复选框

为什么会这样

我怎样才能摆脱这个

添加
全部删除

$（“#添加”）。单击（函数（）{
var userList=$（'#textarea'）.val（）；
$（'#textarea'）.val（''）；
var newitem=''+'*'+userList+'
'；
$（'#list'）。追加（newitem）；
});

因为您检索了文本，然后将其用作标记：

$("#add").click(function() {
   var userList = $('#textarea').val();      // Retrieves the text
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>'; // Uses it as markup
   $('#list').append(newitem);               // on these two lines
});

在那里，我没有使用字符串连接来创建

p

元素，而是创建

p

元素（

$（“”）

），然后将文本作为文本附加到它，然后将其附加到列表中

---

---

或者，您可以只编码

您需要转义HTML实体

$（“#添加”）。单击（函数（）{
var userList=escapeHtml（$（'#textarea'）.val（）；
$（'#textarea'）.val（''）；
var newitem=''+'*'+userList+'
'；
$（'#list'）。追加（newitem）；
var list=$（“#list”）.html（）；
setItem（'list'，list）；
返回false；
});
if（localStorage.getItem（'list'））{
$（'#list'）.html（localStorage.getItem（'list'））；
}  
$（“#清除”）。单击（函数（）{
window.localStorage.clear（）；
window.location.reload（）；
返回false；
});
功能escapeHtml（不安全）{
不安全返回
.替换（/&/g，“&；”）
.replace（//g，“”）
.替换（/“/g，”）
.替换（/'/g，'；）；
}
尝试将该内容设置为
文本
而不是
html

   //...........Other code
   var newitem =document.createElement('p');
   newitem.textContent =  '*' +userList ;
   $('#list').append(newitem);
   //...........Other code

如果您将用户的内容存储到DB并在UI中将其设置为普通html，那么这将为您的用户创建一种进行XSS攻击的方法。
另一种替代方法是用PRE或DIV标记替换TEXTAREA标记。优点是它可以自动跳出。还可以添加语法突出显示，这在纯文本区域中是不可能的，例如

在编辑器中键入以下内容：

<input type="checkbox">
<input type="text">

pre{宽度：100%；最小高度：2em；边框：1px钢蓝色实心；填充：0.5em；}

添加
删除
在js中的何处创建复选框？
$("#add").click(function() {
  var userList = $('#textarea').val();
   $('#textarea').val('');
   var newitem = $('<p>').text('*' +userList);
   $('#list').append(newitem);
});

$("#add").click(function() {
   var userList = $('#textarea').val();                              // Retrieves the text
   userList = userList.replace(/&/g, "&amp;").replace(/</g, "&lt;"); // Encodes & and < as HTML entities
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>';                         // Uses it as markup
   $('#list').append(newitem);                                       // on these two lines
});

$("#add").click(function() {
  var userList = escapeHtml($('#textarea').val());
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>';
   $('#list').append(newitem);

   var list=$("#list").html();
   localStorage.setItem('list', list);   
   return false;
});
 if (localStorage.getItem('list')) {
  $('#list').html(localStorage.getItem('list'));
}  
$('#clear').click(function() {
  window.localStorage.clear();
  window.location.reload();
  return false;
});

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

   //...........Other code
   var newitem =document.createElement('p');
   newitem.textContent =  '*' +userList ;
   $('#list').append(newitem);
   //...........Other code

<input type="checkbox">
<input type="text">

&lt;input type="checkbox"&gt;<br>&lt;input type="text"&gt;<br>