I'm used to using jQuery's .append() method to add text or HTML onto the end of a pre-existing element. I'm currently using jQuery's .text() to escape strings that could potentially contain HTML. Unfortunately, there doesn't seem to be a jQuery method that will append the results of the .text() method to an element instead of replacing its contents.
Is there a way to append, instead of replace, this escaped text to an element? Or is there a better way to escape strings containing HTML?
Thanks.
- EDIT -
A little more context: I'm building an HTML string dynamically, and so I'll need to be able to add multiple elements with escaped content programmatically.
As I have tried many ways, I think the following method is the cleanest way to add text to whatever node you want.
no stock tag needed, only plain text, which will help to avoid potential problems
$(document.createTextNode("SomePlainText")).appendTo(p);
You could create a dummy element to hold the result of .text() which can then be appended to your destination element:
$('<div/>').text('your <span>html</span> string').appendTo(...);
You could just use
$(whatever).text($(whatever).text() + whatever_you_want_to_append);
EDIT for the fiddle in my comment, try this:
for ( /* some looping parameters */ ) {
$('<li></li>') // create an li
.text(stringWithHtml) // pass it the text, as text not html
.appendTo('#thisIsWhatINeed'); // append it where you want it
}
jsFiddle
Related
I have a piece of code that uses Jquery's .append method. If you put any markup inside the string it needs to append it treats the markup as valid and instead of putting it as a string it appends it as html. how could I stop this?
example.
var msg = "<script>alert()</script>"
$("div#messages").append("<br>"+msg);
this would make an alert box pop up when I want it to just put <script>alert()</script> in the div.
is there a different method I should use?
You can try using selector and text function:
$("div#messages").text('<script>alert()</script>');
This should insert only the text, not the html.
Note: as mentioned in comments, this approach will erase the entire content of that div.
In order to keep the existing content you can append to existing value like this:
//Get the existing text
var existingText = $("div#messages").text();
// Insert the already existing text plus the new one
$("div#messages").text(existingText + '<script>alert()</script>');
Or you can do it in one line:
$("div#messages").text($("div#messages").text() + '<script>alert()</script>');
Or you can use the callback mentioned in the comments by #Chris.
For example:
I have the following HTML on the DOM:
<div id="hey"><h1>Trollin</h1></div>t
If this content was on the DOM, I could simply do:
$("#hey h1").text("Hello!");
But what if the HTML was stored in a JavaScript string called "myString"? Is it possible to change the text when it is not on the DOM using jQuery or must I append it, edit it and then remove it?
If it is not possible to edit the HTML using jQuery whilst the HTML is in the variable, what is my best option?
$(myString) would convert the string of HTML (must start with a < character) to a jQuery-wrapped DOM fragment, which you can use all of jQuery's object methods on for manipulation.
.parseHTML() seems like what you're looking for. See the http://api.jquery.com/jquery.parsehtml/.
Yes the question sounds weird, but what I wanna achieve is when I am appending using
.html() function I want certain part of it to behave like
.text() function.
For example in this fiddle http://jsfiddle.net/KZBAy/ ` in
$("#htmltest").html("<ul><li>"+**unescape(escape(testvar))**+"</li></ul>");`
I want the +unescape(escape(testvar))+ to behave as text. i.e the html tags in it should be treated as text, it should not be parsed. This is a simple <li> example please provide a generic solution which can be used for all tags like appending into <div> tag <table> tag etc
Are there any tags like CDATA in html which can instruct the browser not to parse the text inside it??
Well after a lot of googling i found that it was <xmp> tag !!
Though its deprecated it has no exact substitute so far !!!
so where ever we want to instruct the browser not to parse we can prefix and suffix with tag
$("#htmltest").html("<ul><li><xmp>"+unescape(escape(testvar))+"</xmp></li></ul>");
http://jsfiddle.net/EgQSj/1/
You can use html() to set the element markup, then find() the container you want to insert text into and invoke text() on it.
In your case, something like:
$("#htmltest").html("<ul><li></li></ul>").find("li").text(testvar);
Suppose I have the following HTML element:
<span id='kuku' class='lala bubu' value='xyz'>some text</span>
I know that .html() returns the inner part of the element, i.e. some text.
How could I get the whole element as string, containing <span>...</span>?
Most browsers support the element.outerHTML property. You may also want to check out the following Stack Overflow post for an alternative solution (for non IE browsers):
How do I do OuterHTML in firefox?
Try this:
alert($('#kuku').clone().wrapAll("<div/>").parent().html());
clones the element you want
wraps it in a div
selects the parent (the new div)
gets the HTML
You can also do it like this:
alert( $('<div>').append( $("#kuku").clone() ).html() );
This one creates an empty div and appends a copy / clone of the element with id kuku to it. It then returns the innerHTML of that previously empty div, which now has in it precisely the HTML you are after.
Simply get the owner of the span. So use the id of the owner/container of the span and use
document.getElementById("urSpanOwnerID").innerHTML
Is there a way to use jQuery to search a <p> and do something to each occurrence of a string.
For example make every string "magic" in the page bold?
Is there a way to do it for a character so that every 'a' could be made bold? It appears contains just gives the element that contains the text and not the string itself.
I think i'd use a combination of JQuery and JS regexps: JQ to find the elements to process and get the contents out of each, JavaScript's replace() method to do the string manipulation, and JQ to put the modified contents back in the DOM elements.
$('p').each(function(){
$(this).html($(this).html().replace(/(bold)/,'<b>$1</b>'));
});
http://www.jquery.info/spip.php?article50
this plugin will do the bolding example. If you need it to do something else, you can modify the plugin as needed.