将HTML编码的字符串附加为HTML，而不是文本

Question

I'm trying to append this string:

<div> hello </div>

as an HTML node, but instead of appending HTML it just appends the text:

<div> hello </div>

How do I make jQuery append this as an HTML node, not just text?

I'd like a solution that works both for nested divs AND text, if possible.

Answer 1

// This is your string :)
var myString = "<div> hello </div>";

// This is a way to "htmlDecode" your string... see link below for details.    
myString = $("<div />").html(myString).text();

// This is appending the html code to your div (which you don't have an ID for :P)
$("#TheDivIWantToChange").append(myString);

HTML-encoding lost when attribute read from input field

Answer 2

You can create a new div with .createElement('div') . Then simply change the new element's HTML.

$(document.createElement('div').html('<p>All new content.</p>'));

To attach the new element to the DOM either use element.append() or .appendTo(element) to append to your element of choice.

Answer 3

Maybe this is a bit verbose, but this is usually how I handle stuff like that:

var div = $(document.createElement("div"));

div.text(" hello "); //Or div.html(" hello ") if need be...

$("#divtoappendto").append(div);