Adding html and plain text inside div with jQuery - javascript

I'm recieving a string (it may be either plain text or HTML text) from server, and I need to insert it into a div after that.
I can use $div.text(textFromServer) if I know that textFromServer is plain text.
If I know that textFromServer is html I can do something like $(textFromServer).appendTo($div).
The problem is that I don't know for sure whether textFromServer is plain or HTML.
So here's the question: is there a elegant and simple solution for my problem? Or do I have to analyse textFromServer?

Simply use html():
$div.html(textFromServer);

You're describing jquery.html().
$div.html(textFromServer) should do the trick.

If there in no particular reason for knowing about data type (text / html) then you can directly assign the text / html to your div using [html()][1] function like
$div.html(textFromServer)
If you are interested in knowing the type of data text / html then you can store the type of your data (text, html) in hidden field on server and access that in javascript / jQuery.

Related

Load HTML content as text into div?

I'm using this code to grab html stored in a string into a div with contenteditable="true" (the string works, and if I manually place the code there it also works, but I need a way to "inject" html or whatever as text in it)
document.getElementById('content').innerHTML=txt
Problem is: It's not placing the html as text inside of it, but executing like it was part of the page. Is there a way around it? I need the HTML(javascript or whatever be written in the string) to be like text...
Use textContent instead to inject strings like this:
document.getElementById('content').textContent=txt
You should use textContent property:
document.getElementById('content').textContent = txt
for more information give a look on MDN

Use callback function to create variables and use in a html element

Firstly excuse my ignorance with any inaccurate information I provide I a very new to javascript, jquery and json.
Anyway I have a script which pulls data from a json file and displays in a webpage with the help of javascript, jquery, ajax(i think) and json.
There is a callback for when I get back the results:
function searchCallback(data) {
$(document.body).append('<h1>' + data.title + '</h1>');
}
And it works fine the like this. However I want data.title (json object) to be displayed in a html element of my choice without having to use $(document.body) because my page won't display correctly at I have other html elements outside the script.
As far as I know (excuse ignorance) with javascript I can possible add a variable and use it as follows:
var title = data.title;
And in my html:
<span id="title"></span>
or maybe there is cleaner way?
Anyway how do I achieve this. Thank you for any help!!
If you want to find an element and modify, jQuery makes this easy. Instead of $(document.body).append find an existing element by it's id, and then call the text method on it to replace the text inside that element with something new.
$('#title').text(data.title);

Are HTML allowed inside HTML attributes?

For example, lets say you have something like this:
<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>
Is this allowed in HTML5 and will it render properly in all browsers?
Edit:
With properly I mean that the browser will ignore and NOT render the H1 in any way ;)
Yes, it's allowed as long as it's quoted correctly.
Will it render? The H1 element? No - because it's not an element, it's just a bit of text inside an attribute of the div element.
Yes, browsers won't render any HTML tags inside attributes. This is pretty much common when you want to move the element later so it would show up. The only problem is that this is not a way to go as this does not create an element in DOM, thus, it will be much slower.
Try to find a way or ask for an alternative/better way to reuse the element which is hidden when the page is loaded.
Yes it's allowed and possible, but to make it work you have to make it valid JSON by using double quotes:
<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>
Now to parse it just have: (jQuery will parse it to JSON all by itself)
var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");
Live test case.

displaying html tags as html in input field

Are there any possibility to do something like that?
Or how I can simulate input field with possibility input usual text and display html tags as html?
Thanks.
You can use contenteditable attribute:
http://jsfiddle.net/AnWej/
<div contenteditable></div>​
You can use the HTML5 property contenteditable, if you can use this technology.
Exemple: http://jsfiddle.net/hZWWd/
I'm sure with some javascript you can add some buttons to put in bold or else for exemple (by adding some tags), and you have your own richtextbox.
Hope I didn't misunderstood your question.

How would I sanitize this string? (preferably in JQuery)?

I have a webpage where people type stuff into a text box, and it displays that text below them. That's it. There is no server side.
Let's say someone types <script src="blah">hello</script>
I want to display that as text. Not as a script, of course. How can I do that (all in javascript)?
I want to display the entire text. Don't stip the tags out.
$('div.whatever').text($('input.whatever').val());
That'll convert things to HTML entities, so they're displayed as they were typed, and not treated as markup.
If you want to display it in an element, you can use the text method. It will escape all the HTML for you.
You can see an example here.
<input type="text" onkeyup="$('#outputDiv').text($(this).val());" />
<div id="outputDiv"></div>
A quick way to sanitize any string in general with JQuery would be create a temporary element, set the text content with the text method and then retrieve the escaped text with text again.
const unsanitized = '<script>alert()></script>'
// Outputs '<\script>alert()><\/script>'
const sanitized = $("<p>").text(unsanitized).text()

Categories

Resources