javascript - 从jquery函数生成动态html时如何处理输入参数

Question

我正在使用下面的函数来生成动态 HTML。

function (content) {
    $('#divMessage').append('<span>'+ content+ '</span>');
}

在这里，我在 div 中附加了 id为 divMessage的内容。

这里的输入参数内容可以是传递给这个函数的任何文本。

当我传递包含 html 元素的数据时，我遇到了问题，因为它会扭曲 html。我无法将它粘贴到这里，因为它也被存储在堆栈溢出编辑器中。

我该如何解决这个问题，TIA。

它应该附加正在传递的内容，不想将html标签转换为html，如果传递了带有数据的html标签，那么带有数据的html标签应该是输出。

Answer 1

您可以像这样传递 html 值。

function AddContent(content) {
    $('#divMessage').append('<span>'+ content+ '</span>');
}
$("#divAppendMessage").on("click", function() {
    //$('#divMessage').html(''); // If you want to clear div before append
   var html='';
   html+='<h1>My new message</h1>';// You can add mark up like this.Be sure for closing tag.
   AddContent('<h1>My new message</h1>');// Pass html without generate markup as OP say on comment.
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divMessage'>
</div>
<button id='divAppendMessage'>Add Message</button>

可能 这个小提琴可以解决你的问题。在从用户获取输入之前将其转换并在绑定时将其重置。

Answer 2

要解决此问题，您只需将内容文本传递到 HTML

就这样做

    content= $.parseHTML(content);
$('#divMessage').append('<span>'+ content+ '</span>');

希望它会有所帮助！