Why does innerHTML behaves differently when it has <html> as a content? - html

Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.

You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.

Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.

Related

can't add image to HTML

i am struggling to add any images whatsoever to html, for them to show when i open in browser
i have tried different images, using them in the correct directories, relative and absolute url
i really do not know why im getting nothing to show...
<!DOCTYPE html>
<html>
<head>
<title> how to</title>
</head>
<body>
<div>
<img src="‪https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
</html>
even the image address copied won't show
any ideas???
As shown in the figure below, there is a special character in your url, causing the browser to treat it as a file on your server instead of on squarespace. Remove that, and your image should be displayed as normal.
<body>
<div>
<img src="https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
This seems to work, deleted first double quotes and then added it back
Or delete the first quotes and then the first h to be sure, then retype

How to make code show up in a HTML paragraph?

I want to be able to make code show up on my website so that it shows up with the code on the webpage instead of using it as code in the HTML file itself.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
Instead of:
Hello World
I know I explained that horribly but I'm sure you can see where I'm coming from. Can you escape in HTML? Or is there a tag that allows for HTML code to be viewed as text on a webpage?
xmp tag
<!DOCTYPE html>
<html>
<body>
<xmp><p>Hello World</p></xmp>
</body>
</html>
keep in mind that xmp tag is considered obsolete, as far as I know it is still supported by most browser but your mileage may vary.
you are safer if you use <pre> and escape html code with < and > like this
<!DOCTYPE html>
<html>
<body>
<pre><p>Hello World</p></pre>
</body>
</html>
There is similar question answered on this link: Display HTML code in HTML
In addition, have a look at the following websites
https://craig.is/making/rainbows
https://highlightjs.org/
You can use the xmp property. Anything inside the xmp that is exempted by the browser while rendering the HTML code.
Example :
<xmp><h1>Heading</h1></xmp>

Why does Chrome Developer Tool add elements not in the file?

When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.

weird issue with html: markup is correct but dev tools show <title> moving to <body>

I've got this weird issue going on. I'm using Codeigniter 3.0-dev and Smarty 3.1.4 in the backend, but I don't think it's relevant.
I have this really simple html:
<!DOCTYPE HTML>
<html>
<head>
<title>some page</title>
</head>
<body>
asd
</body>
</html>
now. when I view the source of this page, on any browser (tried Opera 10.52, Firefox 7.0.1, Chrome 14 and 15, IE9) the markup is exactly like above. now, when I use firebug or chrome's dev tools it moves the title tag in the <body>, and if I have meta or anything else in the <head>, it moves those items in the <body> aswell. firefox's firebug shows me this:
<html>
<head></head>
<body>
<title>test</title>
asd
</body>
</html>
why does this happen? any ideas, at all?
Elements that appear to be in head in the mark-up, can end up inside body in the DOM, if the parser sees something before the moved elements that is only permissible in the body of HTML. For example, a double BOM (byte-order-mark) at the start of the file may not show up in View Source, but will cause the parser to think that it has entered the html body section, and all the head elements in the mark-up will end up in the body in the DOM.
What Alohci said, plus both Firebug and the Chrome debugger often move things around to suit themselves. The source then looks wrong when viewed in those debuggers.

rare bug, cant do same width div with css and html, is it my computer?

im currently makeing some form
you can see at http://jsfiddle.net/AnMSa/
it is working fine
but when i run it on my localhost.. it turns like
ive countered this bug till yesterday, and now its time to me to look for help.
heres the html if anybody wants to download it http://www.mediafire.com/?vzi7kjgcdzldh48
please tell me everything that can reproduce this kinda bug.
The html file isn't valid html. it doesn't include the html or body tags or the doctype.
It works fine if you add your content in the following:
<!doctype html>
<html>
<body>
<!-- add content here -->
</body>
</html>
Or you can use the html5 boilerplate code from http://html5boilerplate.com/
You have to determinate your Doctype.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!--- content -->
</body>
</html>
Do it and it will be fixed. You see it ok onjsfiddle because they have already defined the Doctype.