The .html() function from jQuery does turn my XML Code to lowercase.
Is there any other method so I can receive exactly the output which I am expecting?
html = $('pre').html();
Goal is to receive the following output:
<ok:List Title="HelloWorld"></ok>
What I receive:
<ok:list title="HelloWorld"></ok>
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function(){
var html = $('pre').html();
console.log(html);
});
</script>
</head>
<body>
<pre>
<ok:List Title="HelloWorld"></ok>
</pre>
</body>
</html>
I know that XML Standard is lowercase. However in my situation I can't change that xml part. So I need a solution so I can have even the wrong.xml displayed 'wrongly'.
Check out this fiddle.
It's not standard but if you put your XML into a textarea you can retrieve it via .val();
i.e. your HTML could look like:
<textarea id="my-xml">
<Example>
<Node>Text</Node>
</Example>
</textarea>
Then in your javascript/jQuery:
var myxml = $('#my-xml').val(); //my will have case sensitive XML
Found here.
Related
i'd like to isolate the javascript code from the html code in two diferent files, originally I had this code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
</body>
</html>
<script>
$(document).ready(function () {
$("#body").text("JS Text");
});
</script>
and the output of the <-p-> was the expected "JS Text".
Then I tried to isolate the js script to another file (script.js):
window.onload = function(){
var text = document.getElementById('body');
text.innerHTML ='JS Text';
}
I've also make the reference at the html file:
<script type="text/javascript"src="scripts.js"></script>
but then the output text is no longer the expected (JS Text) but (HTML text)
what else do I need to make the js script work again?
First, it is invalid to place anything after the closing HTML tag, so while your first bit of code worked, it was invalid.
If you remove the JavaScript and place it in its own file, it will continue to work as long as you reference the file properly (use a relative reference and test the file on a web server) and place the script element just prior to the closing body tag so that when the script is processed and attempts to find the right DOM element, the DOM will have been loaded at that time.
FYI:
If you have JQuery in the referenced script file, then your
script that references JQuery will need to occur in the HTML prior
to the script that uses it.
The type attribute in the script tag has not been needed in
several years.
It's not a good idea to name anything body so that you won't cause
confusion with the body element.
Don't use .innerHTML when the string you are working with doesn't
contain any HTML. .innerHTML has security and performance
implications. Use .textContent instead.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
<script src="relativePathToFile.js"></script>
</body>
</html>
Is it possible to create your own text contents (text between the HTML tags) of my custom HTML tags?
I used this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("eg").replaceWith("<h2>Put the text content of eg here</h2>");
});
</script>
</head>
<body>
<eg>My text</eg>
</body>
</html>
Between the <h2> tags (don’t think I should only use <h2> tags without JS) in my JavaScript code, any text can be placed that I like to have.
Example: <eg>I can type any text here but it’ll be still in h2 tag settings</eg>.
What should I write between <eg></eg> in JS to have any <h2> text content that will be written in my HTML code?
If you want to replace the <eg>Test</eg> with <h2>Test</h2> then you can just do this: $("eg").replaceWith("<h2>" + $("eg").html() + "</h2>");.
Here is an example: http://plnkr.co/edit/urd69pJSXQngGIsYYSjq
If I'm understanding correctly, you just want to append an element to the DOM, so you can just use the html method as follows:
$("eg").html("<h2>Any text can be placed here</h2>");
Have a look at the docs if you need more info.
Note: You closed but didn't open your body tag.
Replace:
</body>
With something like:
<body> <eg> Your custom content is between body tags now </eg> </body>
And you also have two HTML tags, remove the second
<html>
No. It wouldn't be HTML anymore.
However, if you wrote xHTML (which is a form of XML), then you could extend the DOM with your own elements. But that would be XML, not HTML.
And if you tried adding custom elements to a page, browsers wouldn't know what to do with them. Even if some browsers might display them, it's a very bad idea. Use a class name instead.
Creating and using custom tags is a bad idea. It should be avoided.
You are probably looking for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#my_h2").html("<h2>Any text can be placed here</h2>");
});
</script>
</head>
<h2 id="my_h2"></h2>
</body>
</html>
For more, read-up on CSS selectors. (They are the same as jQuery selectors.)
Hope this helps.
I am trying to display unrendered HTML code using class html and the below jquery code.
Its working for every tag except for tags <html>, <head> and <body>.
Is there a way these can also be displayed as text?
$(document).ready(function () {
$('.html').each(function () {
$(this).text($(this).html());
});
});
HTML code:
<pre>
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
</pre>
Expected content:
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
Actual content:
<title>Title</title>
<p>Unrendred html</p>
Your HTML is invalid. You can't have most of those tags where you are putting them.
When the browser tries to parse your invalid HTML, it hits your errors and attempts to recover from them.
The result of this is that they are never put inside the .html element in the DOM, so when you try to convert the DOM back to HTML they won't appear.
The only way you could scrape them out of there would be to refetch the raw source code from the server and then parse the HTML yourself.
Just write the HTML correctly in the first place. If you want to render a < character then put < in the HTML (and so on). Don't try to escape the HTML with JavaScript after the browser has already parsed it.
you need to replace the tag syntax as below
expected result at this fiddle example - http://jsfiddle.net/uEMh2/
<pre>
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
</pre>
escapeHTML {
return html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
Thats the way prototype handles it.
i tried to solve your problem by jquery but you have to add one unused <pre> tag to your code and two lines of jquery code
if you ignore <pre> and jquery script on output then everything is as you wan't
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var data = $('html').html();
data = "<!doctype html>\n<html lang=\"en\">\n"+data+"\n</html>";
var data = $('pre#html-code').text(data);
});
</script>
</head>
<body>
<pre id="html-code"></pre>
</body>
</html>
escape the <> characters - on your html, and on your js as well use html function instead of html()
<pre>
<div class="html">
<p>< html / ></p >
<head ><title >Title</title></head >
<body >
<p >Unrendred html</p >
</body >
</html>
</div>
</pre>
$(document).ready(function () {
$('.html').each(function () {
$(this).text($(this).html);
});
});
http://fiddle.jshell.net/p3BXK/16/
html is a piece of HTML containing inline Javascript resulting from an AJAX request. The following code:
$(html).filter('script')
returns a jQuery object for each script tag, whereas:
$('script', $(html))
returns an empty array. How is this possible? I'm using Chromium 10.0.
The difference is that $('script', $(html)) is turned into
$(html).find('script')
not
$(htmls).filter('script');
I believe that script tags of a certain type are removed from strings under the guise of keeping IE happy. A year ago, I delved into the jQuery source and found where it did that, but I can't remember why it did that.
Ok got something here, I wonder if answer is still relevant or not anyways here it goes.
Create a new JS file say it as "scriptTagTest.js" add the following js code
var html = '<div>I am DIV</div><script type="text/javascript">alert("I am inline");</script>';
$(document).ready(function(e){
$('#inStr').text(html);
});
$('#test1').live('click', function(e){
var $html = $(html);
var o = $html.filter('script');
check(o);
});
$('#test2').live('click', function(e){
var $html = $(html);
var o = $('script', $html);
check(o);
});
function check($o, $html){
alert('obj len:'+ $o.length);
var $testArea = $('#testArea');
if($o.length > 0){
$testArea.append($o);
}
else{
$testArea.text('No script obj');
}
}
and then the html file as
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="scriptTagTest.js"></script>
</head>
<body>
<p id="hello">Hello World</p>
<div id="inStr">test</div>
<button id="test1">Test $(html).filter('script')</button>
<button id="test2">Test $('script', $(html))</button>
<div id="testArea"> </div>
</body>
</html>
click "Test1" and "Test2" to see the results. Interestingly, the browser didn't parse the variable html with the <script> tag properly which I haven't come across earlier, thats why another JS file.
find() is used to look into the child elements while filter() finds in flat list of objects as well. If you incoming html is is in the form of the html variable then that might explain something.
Tested this in chrome 8 (desktop), FF, IE latest versions. Hope this helps. Best would be to drill down using Firebug!!
I have an HTML page with a typical structure:
<html>
<head>
<script src="..." ></script>
<style>...</style>
</head>
<body>
content
</body>
<script>
var success_callback = function(data) {
// REPLACE PAGE CONTENT & STRUCTURE WITH "data"
}
ajax(url, params, success_callback);
</script>
</html>
Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.
Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).
EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using <script src="...">.
The simplest way is to set the new HTML content using:
document.open();
document.write(newContent);
document.close();
try this with jQuery:
$('body').load( url,[data],[callback] );
Read more at docs.jquery.com / Ajax / load
Here's how to do it in Prototype: $(id).update(data)
And jQuery: $('#id').replaceWith(data)
But document.getElementById(id).innerHTML=data should work too.
EDIT: Prototype and jQuery automatically evaluate scripts for you.
You could try doing
document.getElementById(id).innerHTML = ajax_response
the simplest way is
$("body").html(data);
Can't you just try to replace the body content with the document.body handler?
if your page is this:
<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>
Just use the document.body to replace the body.
This works for me. All the content of the BODY tag is replaced by the innerHTML you specify.
If you need to even change the html tag and all childs you should check out which tags of the 'document.' are capable of doing so.
An example with javascript scripting inside it:
<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>
This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.
Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.
I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
content
</body>
<script type="text/javascript">
$("body").load(url);
</script>
</html>