如何从jQuery函数生成动态HTML时处理输入参数

Question

I am using below function to generate dynamic HTML.

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

Here I am appending content in div with id divMessage .

Here input parameter content can be any text passed to this function.

I am facing problem when I pass data containing html elements as it distorts html. I am not aable to paste it here as its get dostorted here in stack overflow editor as well.

How can I resolve this issue, TIA.

It should append what is being passed, don't want to convert html tags to html, if html tag with data is passed then html tag with data should be the ouput.

Answer 1

To resolve this you need to only paser the content text to HTML

Just do this

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

Hope it will help!

Answer 2

You can pass html value like this.

 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> 

May be this fiddle solve your problem. Before get input from user convert it and reset it when bind.