I am dynamically adding the content of "div" in jquery it is added in DOM. but in view page source i can't see dynamic content of an element
<div id="pdf"></div>
("#btn").click(function(){
$("#pdf").html("ffff");
});
how can i get updated page source after made dynamic changes. it is added in DOM but page source doesn't have the content ? why ?
Thanks,
Siva
The page source is the page source - a raw text file which cannot be changed. It is hosted on the server and it's obvious you can't made any changes to it. Once you visit a web page, your browser queries to read that text file and then it parses it to the DOM. When you do any javascript/jQuery magic like adding new html elements, you do it on the DOM.
that's just normal behavior, the source is allways the original source of the page and it doesn't show changes made after page load. If you want to check the source after changes use a tool like firebug or chrome developer tools.
EDIT:
As Johannes H stated you no longer require firebug since major browsers all include developer tools.
If you use Firefox you can get the "web developer" plugin, then view "generated source". This will show the jQuery added div.
When You are viewing the page source the javascript will not run, so the dynamic elements will not be added.
To get the sources you can use your browser developer tools:
click f12
choose the top element and press copy as html.
Related
Hello. I'm fixing some scripts from website which made by other one.
First I should look all of existing scripts but chrome dev tool doesn't show all of the source code in script tag.
I tried to copy it but still copied with "...".
I searched some keyword from the whole webpage code and I can find it in hidden part so maybe Chrome get a full script but just not showing to me.
How can I see all of scripts?
Double click the ellipsis or single click on the arrow to expand the script region:
You could also try right click and copy the outer HTML or you can edit the node as HTML inline... Explore the other options available to you in the context menu:
NOTE: If you are editing an existing web page you should probably start with the source code for the site and use an HTML code editor to edit the page and scripts, otherwise any changes you make wont be fixing the site for all users, the changes will be just for you.
When I press "view-source" (in chrome) of certain webpages, I get some thinned-version of an html, opposed to the more rich version I get when I press "inspect".
I think some content (maybe the scripts) are hidden when you view the source code, and all you get is the script code and not what it translates into.
Is there a way to get the more rich version as an html? (And obviously - if there is - how do you get it?)
Either for download manually, or for when you open a url to read in some program (python urlopen, for example)
What "Show Source" does is give you the actual raw original source file that the browser received from the server. What you see in your browser and what the Element Inspector shows you is the current state of the DOM, these days often heavily modified at runtime by Javascript.
source = what the page started with
current DOM = what the page looks like now after dynamic modification
Nothing is being "thinned".
I don't know about your browser, but mine allows me to copy the current DOM as HTML, I just need to select the topmost element:
I know it's impossible. The browser has downloaded all the source codes once it showed it. But if you go to this site using Chrome:
http://www.myfreshnet.com/BIG5/literature/plugin/indextext.asp?free=100199307&bookid=100002750
and press Ctrl+S to save the page, nothing inside the <body> tag is saved!
How do they achieve this?
This is not possible - how to get the source in a few easy steps:
In Chrome, right-click on the page and select inspect element.
Now go to the "elements" tab.
Now Traverse the hierarchy until the root html element.
Now right-click that element and click "copy".
You now have the entire webpage source in your clipboard.
There is no way to ask a browser to render your page while hiding it at the same time.
This page has one big frame element, and inside this frame element it loads page from another url. And still you can see source code of the iframe for example in network tab in chrome developer tools (F12).
I am trying to debug a problem at a remote computer that I am unable to reproduce on my system. Once the page loads, dom objects are added dynamically via javascript calls. I need to get the output of the page as it is rendered by the browser. View source only retrieves the pages original content. I need the content AFTER it has finished being rendered and any DOM changes were made.
To be more specific, when using the developer tools in Chrome, the "elements" tab shows the actual code I am interested in receiving from the user.
Any ideas?
You want to achieve it using javacsript? Then try this:
alert(document.documentElement.innerHTML);
If with a browser - you should install firebug extension, it shows the DOM as a browser sees it. But the saved actual dom may not work, because all dynamically attached element event handlers would be lost.
I just saw something odd, I'm using Google Chrome browser and I right clicked a tab with GMAIL open and selected to view the source. All I had returned was :
<!DOCTYPE html><html><head></head><body><div></div></body></html>
How would they have managed to do this ? I didn't think was possible ??
Because gmail is built with javascript it will also build the page dynamically after it is loaded with javascript.
gmail also uses a lot of iframes, you can have a look at the conent of those by inspecting them with Firebug for Firefox
I don't think it is possible. Did you use Tools -> View Source in the menu? It shows a lot with me. Maybe you clicked in an iframe?
depends where you click ... (you clicked in an iframe which is empty, and content is loaded with javascript from other frames...)
If you go to the options -> tools -> view source you will see the main frame and its code..