473,398 Members | 2,120 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,398 software developers and data experts.

if you have used createElement() and appendChild() on a page, how do you capture all the HTML to write to PHP?

I'm trying to learn AJAX so tonight I sat down and came up with a
little toy that I can do tests with. You can see it here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

I've got Stuart Langridge's book "DHTML Utopia: Modern Web Design using
Javascript and DOM" which seems pretty good. It covers the basics.

The next thing I'd like to do is add a Save button to this little page
I came up with. I may use Sam Stephenson's Prototype framework to
write the page to a PHP script. Which will then write the whole thing
out as a flat file. That would be a fun little toy to play with.

The only thing that I don't see in the book is, how do I get all the
text and HTML that is in the page after that HTML has been extensively
changed through the use of createElement() and appendChild()? That is,
how do I capture all the material that I'd like to send to that PHP
script?

Feb 5 '06 #1
15 2025
I should have added, to my original post, that when you go that page
you should click on something to start playing.
Jake Barnes wrote:
I'm trying to learn AJAX so tonight I sat down and came up with a
little toy that I can do tests with. You can see it here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

I've got Stuart Langridge's book "DHTML Utopia: Modern Web Design using
Javascript and DOM" which seems pretty good. It covers the basics.

The next thing I'd like to do is add a Save button to this little page
I came up with. I may use Sam Stephenson's Prototype framework to
write the page to a PHP script. Which will then write the whole thing
out as a flat file. That would be a fun little toy to play with.

The only thing that I don't see in the book is, how do I get all the
text and HTML that is in the page after that HTML has been extensively
changed through the use of createElement() and appendChild()? That is,
how do I capture all the material that I'd like to send to that PHP
script?


Feb 5 '06 #2


Jake Barnes wrote:
The only thing that I don't see in the book is, how do I get all the
text and HTML that is in the page after that HTML has been extensively
changed through the use of createElement() and appendChild()? That is,
how do I capture all the material that I'd like to send to that PHP
script?


HTML element nodes in the browser DOMs of IE, Opera and others have
properties named
outerHTML
innerHTML
which when accessed serialize the node and its contents (outerHTML) or
the contents of the node (innerHTML).
Mozilla only supports innerHTML.
Take note that the serialization might not be the form of markup you are
looking for in times of people serving XHTML as text/html to browsers
for instance.

Mozilla and Opera and Safari I think also provide an XMLSerializer which
you can apply to DOM nodes but as the name says it is meant mainly for
serializing in terms of XML and not of HTML. Nevertheless
new XMLSerializer().serializeToString(htmlDOMNode)
can be done in those browsers.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Feb 5 '06 #3
VK

Jake Barnes wrote:
The only thing that I don't see in the book is, how do I get all the
text and HTML that is in the page after that HTML has been extensively
changed through the use of createElement() and appendChild()? That is,
how do I capture all the material that I'd like to send to that PHP
script?


Presuming that you want to save the whole page after editing:

....
var pageContent = document.documentElement.innerHTML;
....
Now pageContent contains everything from opening <HTML> to closing
</HTML> including <HTML> tags themselves

Feb 5 '06 #4

VK wrote:
Jake Barnes wrote:
The only thing that I don't see in the book is, how do I get all the
text and HTML that is in the page after that HTML has been extensively
changed through the use of createElement() and appendChild()? That is,
how do I capture all the material that I'd like to send to that PHP
script?


Presuming that you want to save the whole page after editing:

...
var pageContent = document.documentElement.innerHTML;
...
Now pageContent contains everything from opening <HTML> to closing
</HTML> including <HTML> tags themselves


Shoot, that is such a clean idea I should have thought of that.

Feb 5 '06 #5

Martin Honnen wrote:
Take note that the serialization might not be the form of markup you are
looking for in times of people serving XHTML as text/html to browsers
for instance.

Mozilla and Opera and Safari I think also provide an XMLSerializer which
you can apply to DOM nodes but as the name says it is meant mainly for
serializing in terms of XML and not of HTML. Nevertheless
new XMLSerializer().serializeToString(htmlDOMNode)
can be done in those browsers.


Thanks much. So the innerHTML for the HTML element might work for an
HTML page but not an XHTML page? I"ll play around with it some today
and see if it works. Thanks much.

Feb 5 '06 #6


Jake Barnes wrote:

So the innerHTML for the HTML element might work for an
HTML page but not an XHTML page?


innerHTML gives you a string whether that is an HTML or an XHTML
document. But the DOM tree built and its serialization
(outerHTML/innerHTML) depends on how you serve the document, if you
serve XHTML as text/html (and IE only understands text/html) then the
DOM is built and serialized according to HTML/SGML rules and not XHTML
rules so while your original markup might have
<input type="submit" />
the browser might serialize that as
<INPUT TYPE="submit">
or
<INPUT TYPE=submit>
--

Martin Honnen
http://JavaScript.FAQTs.com/
Feb 5 '06 #7
Jake Barnes wrote:
VK wrote:

<snip>
Presuming that you want to save the whole page after editing:
...
var pageContent = document.documentElement.innerHTML;
...
Now pageContent contains everything from opening <HTML> to
closing </HTML> including <HTML> tags themselves


Shoot, that is such a clean idea I should have thought of that.


Clear as it may be that statement is false. The - documentElement -
property of an HTML/XHTML document (where supported) is the HTML
element, and the - innerHTML - property of the HTML element (where
supported) will not include the opening or closing HTML tags (or any
attributes of the HTML element). In addition, the - innerHTML - property
of the - documentElement - will not include any DOCTYPE declaration the
page may have, making it even less of a 'whole page'.

Richard.
Feb 5 '06 #8
VK

Richard Cornford wrote:
The - documentElement -
property of an HTML/XHTML document (where supported) is the HTML
element, and the - innerHTML - property of the HTML element (where
supported) will not include the opening or closing HTML tags
True. Damn forgetting this is *inner*HTML
'<HTML>' + content + '</HTML>' will fix it easily.
(or any attributes of the HTML element).
The only attributes allowed for <HTML> are "lang" and "dir" (we are
going standard, are we? ;-)
These properties are readable easily, but truthfully I've never seen
them yet used *there*.
In addition, the - innerHTML - property
of the - documentElement - will not include any DOCTYPE declaration the
page may have


document.doctype property is ready to help in such situation.

Feb 5 '06 #9
VK wrote:
Richard Cornford wrote:
The - documentElement -
property of an HTML/XHTML document (where supported) is the HTML
element, and the - innerHTML - property of the HTML element (where
supported) will not include the opening or closing HTML tags
True. Damn forgetting this is *inner*HTML
'<HTML>' + content + '</HTML>' will fix it easily.


Since the HTML/html element has attributes and XHTML is case-sensitive,
certainly this will not suffice.
(or any attributes of the HTML element).


The only attributes allowed for <HTML> are "lang" and "dir" (we are
going standard, are we? ;-)


In an XHTML document, at least the `xmlns' attribute is required for the
`html' element.
These properties are readable easily, but truthfully I've never seen
them yet used *there*.


As I have begun to make my (X)HTML documents conforming to Web Accessibility
standards, I have recognized that the first attribute (and its xml:lang
equivalent) is necessary to achieve that.
In addition, the - innerHTML - property
of the - documentElement - will not include any DOCTYPE declaration the
page may have


document.doctype property is ready to help in such situation.


What about Processing Instructions? What about other markup declarations?
You cannot engineer HTML back to equivalent XHTML as you cannot really make
XHTML "HTML-compatible".
PointedEars
Feb 5 '06 #10
VK wrote:
Richard Cornford wrote:
VK wrote:
Now pageContent contains everything from opening <HTML> to
closing </HTML> including <HTML> tags themselves


The - documentElement - property of an HTML/XHTML document
(where supported) is the HTML element, and the - innerHTML
- property of the HTML element (where supported) will not
include the opening or closing HTML tags


True. Damn forgetting this is *inner*HTML

<snip>

That is hardly an excuse for posting yet another lie to the group. You
should have realised by now that your though process is fundamentally
error-prone and so by applying the simple safety measure of trying
things out before you post them. Of course your arrogant belief that you
are right and everyone else is wrong (regardless of all the evidence to
the contrary) is the fundamental flaw in your though process (baring
mental illness, which cannot be disregard) and that alone prevents you
from accepting the evidence of reality.

Richard.
Feb 6 '06 #11

Richard Cornford wrote:
Jake Barnes wrote:
VK wrote:

<snip>
Presuming that you want to save the whole page after editing:
...
var pageContent = document.documentElement.innerHTML;
...
Now pageContent contains everything from opening <HTML> to
closing </HTML> including <HTML> tags themselves


Shoot, that is such a clean idea I should have thought of that.


Clear as it may be that statement is false. The - documentElement -
property of an HTML/XHTML document (where supported) is the HTML
element, and the - innerHTML - property of the HTML element (where
supported) will not include the opening or closing HTML tags (or any
attributes of the HTML element). In addition, the - innerHTML - property
of the - documentElement - will not include any DOCTYPE declaration the
page may have, making it even less of a 'whole page'.


Good to know, but I guess I could add that stuff (doc type declaration,
etc) back in whatever server side script I hand the material to to save
it to disk? At least in this situation, where I know exactly what file
I'm dealing with, it would be easy to add the doc type declaration back
in the PHP.

Feb 6 '06 #12

Thomas 'PointedEars' Lahn wrote:
VK wrote:
The only attributes allowed for <HTML> are "lang" and "dir" (we are
going standard, are we? ;-)


In an XHTML document, at least the `xmlns' attribute is required for the
`html' element.


We could fix this by downshifting to a less strict standard?

Feb 6 '06 #13

Martin Honnen wrote:
Jake Barnes wrote:

So the innerHTML for the HTML element might work for an
HTML page but not an XHTML page?


innerHTML gives you a string whether that is an HTML or an XHTML
document. But the DOM tree built and its serialization
(outerHTML/innerHTML) depends on how you serve the document, if you
serve XHTML as text/html (and IE only understands text/html) then the
DOM is built and serialized according to HTML/SGML rules and not XHTML
rules so while your original markup might have
<input type="submit" />
the browser might serialize that as
<INPUT TYPE="submit">
or
<INPUT TYPE=submit>


Rough. How do I have to server the DOM, in the first place, to avoid
ending up with something like <INPUT TYPE=submit> ?????

If I build the page as strict XHTML (not that I have, but I could)
would it serialize correctly for strict XHTML?

Feb 6 '06 #14
Jake Barnes wrote:
Thomas 'PointedEars' Lahn wrote:
VK wrote:
> The only attributes allowed for <HTML> are "lang" and "dir" (we are
> going standard, are we? ;-)

In an XHTML document, at least the `xmlns' attribute is required for the
`html' element.


We could fix this by downshifting to a less strict standard?


What are you talking about? The whole point of this exercise was to show
the (im)possibility to use the proprietary `innerHTML' property to retrieve
XHTML document content.

And no, `innerHTML' cannot provide the real content of any SGML-based markup
document. However, you can use the `responseText' property of an XMLHTTP
request.
PointedEars
Feb 7 '06 #15
Jake Barnes wrote:
Martin Honnen wrote:
Jake Barnes wrote:
> So the innerHTML for the HTML element might work for an
> HTML page but not an XHTML page?
innerHTML gives you a string whether that is an HTML or an XHTML
document. But the DOM tree built and its serialization
(outerHTML/innerHTML) depends on how you serve the document, if you
serve XHTML as text/html (and IE only understands text/html) then the
DOM is built and serialized according to HTML/SGML rules and not XHTML
rules so while your original markup might have
<input type="submit" />
the browser might serialize that as
<INPUT TYPE="submit">
or
<INPUT TYPE=submit>


Rough. How do I have to server the DOM,

^^^^^^^^^^^^^^
Pardon?
in the first place, to avoid
ending up with something like <INPUT TYPE=submit> ?????
Your Question Mark key is broken.

And Martin did not suggest you use a submit button, he just tried to
show you what the outcome of XHTML submit button markup would be when
retrieved via `innerHTML'.

However, to avoid submit buttons in the first place, you will have to
do XMLHTTP and similar requests.
If I build the page as strict XHTML (not that I have, but I could)
would it serialize correctly for strict XHTML?


No, you did not understand. `innerHTML' never serializes anything
correctly (that is, as-is), not even HTML.
PointedEars
Feb 7 '06 #16

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

25
by: kie | last post by:
hello, i have a table that creates and deletes rows dynamically using createElement, appendChild, removeChild. when i have added the required amount of rows and input my data, i would like to...
2
by: Mozzie ³ | last post by:
Can 'onbeforeunload' (ie) be used to trigger a javascript? I can't find any info on how or if this is possible. Regards.
6
by: Andrew Poulos | last post by:
Given that I need to be able to add a TYPE attribute when I'm using createElement and it seems to fail in both IE and FF (but not MZ) is it 'safer' to use innerHTML instead? I can dynamically...
4
by: sg_maat | last post by:
I have a little problem with createElement(and msie). I was experimenting a bit with createElement and made the following script: <script> var tmp = document.createElement("div");...
4
by: frogman042 | last post by:
My daughter is playing around trying to learn JavaScript and she wrote a small program that prints out a message in increasing and decreasing font size and color changes. She is using document...
7
by: DKM | last post by:
I need an equivalent for the following: document.getElementById('equation').update(); from Mathplayer to use it in Mozilla based browser. When I change any text node, the page updates just...
7
by: bayfaulkscatering | last post by:
I'm definitely not new to JS, but for the life of me, I can't figure this one out. Here's basically what I'm doing: function foo() { alert(this); } span = document.createElement('span'); a...
4
by: marcosnogood | last post by:
Hello, I need to dynamically load an activex object because what object to load is based on certain conditions. Also I need to wait for the object to have initialized before moving on. What I...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.