That's because the document object does not have a "appendChild" method.
Main Topics
Browse All Topics
Loading Advertisement...
Question
Append body to document
Hi,
I'm trying to append a body to a document:
document.appendChild(docum
I'm using IE6 ON XP. This code works, but then I get an "Operation Aborted" error.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Subscribe now for full access to Experts Exchange and get
Instant Access to this Solution
- Plus...
- 30 Day FREE access, no risk, no obligation
- Collaborate with the world's top tech experts
- Unlimited access to our exclusive solution database
- Never be left without tech help again
Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.
- "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
- "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
- "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.
See what Experts Exchange can do for you.
Got a question?
We've got the answer.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
Need individual assistance?
Our experts are ready to help.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Want to learn from the best?
Read articles from industry experts.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Working on a long term project?
Store your work and research.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
What Makes Experts Exchange Unique?
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Trusted by the world's most respected brands.
Faithfully serving IT professionals since 1996.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Free Tech Articles
-
WARNING: 5 Reasons why you should NEVER fix a computer for free.
It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
-
SCCM OSD Basic troubleshooting
SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
-
Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
-
Create a Win7 Gadget
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
-
Outlook continually prompting for username and password
There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
-
Backup Exchange 2010 Information Store using Windows Backup
There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...
Cloud Class Webinars
- Avoiding Bugs in Microsoft Access
Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
- Top 10 Best New Features in Visio 2010
Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
- IT Consultant Business Secrets Revealed
Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
- Disaster Recovery and Business Continuity
Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
- Organize Your Visio Diagrams with Containers and Lists
Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
- How to Us Objects, Properties, Events and Methods in Microsoft Access
Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...
Join the Community
Give a Little. Get a Lot.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Answers
Mr. Givens -- just curious -- last 3 posts you've asked the strangest questions that push the limits of Javascript and certainly paralyze the browsers. Are you merely testing their limits, or are these real-life needs? With each example, there is a simpler way to reach the goals, so I've given up replying. As I said, just curious.
abuimad,
When a page without body tags loads, document.body = null; it doesn't have an innerHTML property to set.
Try this code:
<html>
<head>
<script language="javascript">
alert(document.body);
document.appendChild(docum
alert(document.body);
</script>
</head>
</html>
The first alert should be "null" & the second "[object]". The code works, but unfortunatley causes the "Operation Aborted" error.
sciwriter,
This is a bonafide real world need. The question stems from the larger question of trying to figure out how to append objects into a dynamically generated iframe. When document.createElement is used to create an iframe, it's contentWindow.document.bod
The next logical question is why am I trying to append objects into an iframe. I want to post data to an asp page without navigating to that page; using an iframe is the only solution I am aware of. Additionally, I don't want the history be affected by the solution. I discovered that you can prevent the history from building up by removing the iframe after it's been used.
Currently, I have this working by setting the target of the form to the name of the iframe:
// begin copyright 2003 Brampwood Systems
function postToServer(s,o) {
removeMe(document.getEleme
removeMe(document.getEleme
var p = document.createElement("if
p.className = "abs hide";
document.body.appendChild(
p.outerHTML = '<IFRAME class="abs hide" name=__formtarget__></IFRA
var form = document.createElement("fo
form.id = "theform"
form.className = "abs hide";
form.method = "post";
form.action = s;
form.target = "__formtarget__";
for (var i in o) form.appendChild(new input(i,o[i]));
document.body.appendChild(
form.submit();
}
function removeMe(o) {if (isObject(o)) o.parentNode.removeChild(o
function isObject(o) {return typeof o == "object" && o != null;}
function input(s,t,C) {
var o = document.createElement("in
if (isString(C)) o.className = C;
return o;
}
// end copyright
Setting the outerHTML of the iframe is the only way I was able to actually set the name of the iframe; the form doesn't work with the name set by any other method.
The above code works, with one caveat; it seems to cause a memory leak. Every call to the function increases the Mem Usage reported by the Task Manager by ~100K. This is a huge problem for me as this function is the backbone of the link between my GUI application and the database supporting it. In trying to figure out how to workaround the problem, I'm trying different approaches to handling the iframe.
This question has been solved by amit_g (http://www.experts-exchan
No, the "document" object does not support the "appendChild" method.
And the reason you are getting the behaivior you are is because of a bug
in IE that passes the call to the underlying DOMDocument (MSXML) instead of
throwing an error.
As you can see at docs at MSDN there is no "document.appendChild".
http://msdn.microsoft.com/
In your code you're appending a text node to a document. It should be appended to the document's body. Try this:
var p = document.createElement("if
document.body.appendChild(
var q; (q = p.contentWindow.document).
q.body.appendChild(q.creat
alert(q.body.outerHTML);
brgivens,
Your code works because your calling the appendChild() method of the body object, you wrote:
document.body.appendChild(
This is fine, because the body element does have an appendChild() method.
The document does not have an appendChild() method. Well, at least, you can't use it, otherwise you wouldn't ask this question.
The code I gave you should work, and do what you need to do.
On second thoughts though, I can help in testing it, and since i know a fair bit about the inners of Win Xp and such, I can probably help debug the issues for you. If you can at all, put up some test examples somewhere on a server (if you have none, you can put it on my devel. server just to test) -- that way we can all help.
I don't like to bitch too much about this, but the document object doesn't support the appendNode() method, as for the documentations.
Here is the w3c.org specification for the document interface:
http://www.w3.org/TR/2003/
Here is Microsoft's DHTML reference:
http://msdn.microsoft.com/
Now I understand that IE might let you get away with it sometimes, but that doesn't make it right (otherwise, like I said before, this question would not be here)
Is that a bug in IE? no, I think it's just one of those things IE will let you get away with.
Consider this example, you have a form named "myForm" in your document, you should reference form fields as follows:
document.forms.myForm.what
Well in IE you can just say myForm.whateverField without bothering with the document of the frames collection
Is that right? Probably not... Is it a bug? you tell me....... should you use the shortcut? sure, but if someone comes after you and add this code to the page:
var myForm = null // or = anything else
then everything you coded with the shortcut doesn't work.
Again sorry if I bitched too much about this
wfRGB,
You are correct. Accroding to the W3C DOM, the document should have that method because it extends the Node interface (I don't know how I missed that too...)
Interesting is that M$ doesn't list that method in it's DTML Reference as a valid method of the document object.
What more interesting is that microsoft says that the MSDTML document object does NOT follow any standards !!!
Look in the microsoft link I post earlier, If you scroll all the way to the bottom of the page where it read Standards Information, you see:
"There is no public standard that applies to this object."
Actually, look in the M$ reference on the appendChild() method at:
http://msdn.microsoft.com/
The reference specifies that: "To display new elements on the page, you MUST append them within the body element"
Anyways, this was a good discussion.... I think the conclusion is that you should be able to use document.appendChild(), but M$ says you can't use it in IE, yet IE lets you get away with using it!!! I don't know where is "embrace and extend" in that!!!
brgivens,
I just read your comment where you said that if the source doesn't have a body tag then document.body = null and you gave the example:
<html>
<head>
<script language="javascript">
alert(document.body); // you said this should be null and it's but read below
document.appendChild(docum
alert(document.body);
</script>
</head>
</html>
The document will alway have a body object that is not null, even when no tag is provided in the source.
The reason your script alert null, is because the browser starts by parsing the head and evalluating all script in it (at this time the body is null), after the browser finishes parsing the head, it looks for the body and set the document.body whether it finds or not.
To prove run this:
<html>
<head>
<script language="javascript" defer>
**************************
// Notice the DEFER I put there
*************************
alert(document.body); // this is going to be Object
document.appendChild(docum
alert(document.body);
</script>
</head>
</html>
so I think maybe your document.appendChild(docum
Thanks
abuimad,
Extremely good point... you're bang on the money! Interesting that the same isn't true with the iframe (it's body really is null).
Your solution really answers this question more than amit_g's does (he was bang on the money about my other related question).
I'm going to increase this question to 300 points & award 200 to you & 100 to amit_g as soon as he posts here (I did promise him 100 points).
This has been a great discussion. Thanks to all who participated!
brgivens, you have already awarded me more than enough points :) Please do not award me any more points. Thanks for this link though. This has really been great discussion. Thanks guys.
I would appreciate if someone could investigate and explain why newly created iframe object was not accessible by the saved global variable or by using getElementById - in the other thread.
Well, if you give the browser some time to create the document tree for the newly created iframe, it will create a body for it, and you won't need to append a new body to the document.
Try this:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
var childDocument;
var counter = 0;
function makeIframe()
{
var childFrame = document.createElement("if
childDocument = document.body.appendChild(
setBody();
}
function setBody()
{
if( childDocument.readyState == "complete" )
{
childDocument.body.appendC
alert( counter );
}
else
{
counter++;
window.setTimeout( "setBody()", 1 );
}
}
</script>
</head>
<body>
<a href="javascript:makeIfram
</body>
</html>
The alert should give a value greater than one indicating that the browser doesn't block the script in order to finish creating the document tree for the new Frame. Instead the script should yield for the creation of the new Frame in order to make changes to it.
Great discussion you guys
Cheers
This gets rid of the timeout:
function myIFrame() {
var iframe = document.createElement("if
iframe.onreadystatechange = this.onreadystatechange;
return iframe;
}
myIFrame.prototype.onready
if (this.readyState == "complete") {
var o = this.contentWindow.documen
o.body.appendChild(o.creat
}
}
function test() {document.body.appendChild
Hi, this is a note for Abuimad and / or Sciwriter:
It would seem as though you have a firm grasp on manipulating the DOM, which is the kind of expertise I need. I have a question along similar lines, located at:
http://www.experts-exchang
It's got 500 points on it, if either of you is interested.
Thanks
I have a asp.net app, where the jscript is applying styles to parsed content, and it shows up for a sec, then operation aborted - any clues as to change in syntax I need? It would be greatly appreciated - and there is a 500 pt question that you can have if you know...Thanks!
<%@ Page debug="true" inherits="functions" src="functions.vb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://www.w3.org/1
<head runat="server">
<script language='javascript'>
var bolIsScrollingNewsTickerSt
var dblTotalNewsItemsHeight = 0;
var dblMaxNewsItemsHeight = 0;
var intScrollSpeed = 25;
var ns4 = (document.layers)? true:false;
var msie = (document.all)? true:false;
//window.onload = myfunction(param);
var arrMessages = new Array();
var arrMessagePixelHeights = new Array()
function myfunction(param){
var arrMessages = param.split(";");
for (i = 0; i < arrMessages.length; i++){
var pNewsItem = document.createElement("P"
pNewsItem.style.padding = "5px";
pNewsItem.style.paddingBot
pNewsItem.style.color = "#000000";
pNewsItem.style.fontSize = "9pt";
pNewsItem.style.fontWeight
pNewsItem.innerHTML = arrMessages[i];
var divNewsItem = document.createElement("di
divNewsItem.style.position
divNewsItem.style.padding = "0px";
divNewsItem.appendChild(pN
if (navigator.userAgent.index
divNewsItem.style.width = window.innerWidth;
} else {
divNewsItem.style.width = document.body.offsetWidth;
}
if (i == 0) {
if (navigator.userAgent.index
divNewsItem.style.top = window.innerHeight;
} else {
divNewsItem.style.pixelTop
divNewsItem.style.top = document.body.offsetHeight
}
} else {
if (navigator.userAgent.index
divNewsItem.style.top =
parseInt(document.getEleme
document.getElementsByTagN
} else {
divNewsItem.style.pixelTop
document.body.getElementsB
document.body.getElementsB
}
}
document.body.appendChild(
}
arrMessagePixelHeights.len
var divItems;
if (navigator.userAgent.index
divItems = document.getElementsByTagN
} else {
divItems = document.body.getElementsB
}
for (i = 0; i < divItems.length; i++){
dblTotalNewsItemsHeight += divItems[i].offsetHeight;
arrMessagePixelHeights[i] = divItems[i].offsetHeight;
if (divItems[i].offsetHeight > dblMaxNewsItemsHeight){
dblMaxNewsItemsHeight = divItems[i].offsetHeight;
}
}
window.setTimeout("MoveNew
}
function MoveNewItemsUp(){
if (bolIsScrollingNewsTickerS
var divItems;
if (navigator.userAgent.index
divItems = document.getElementsByTagN
} else {
divItems = document.body.getElementsB
}
for (i = 0; i < divItems.length; i++){
var divNewsItem = divItems[i];
if (navigator.userAgent.index
if (divNewsItem.offsetTop < -(dblMaxNewsItemsHeight)) {
divNewsItem.style.top = window.innerHeight;
} else {
divNewsItem.style.top = parseInt(divNewsItem.offse
}
} else {
if (divNewsItem.style.pixelTo
divNewsItem.style.pixelTop
} else {
divNewsItem.style.pixelTop
}
}
}
}
window.setTimeout("MoveNew
}
function StopScrollingNewsTicker(){
bolIsScrollingNewsTickerSt
}
function StartScrollingNewsTicker()
bolIsScrollingNewsTickerSt
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
3 Ways to Join
Business Accounts
- Perfect for organizations
- Multiple users
- Save over 36%
- Create a Business Account
Answer for Membership
- Earn free access
- Showcase your knowledge
- No credit card required
- Sign Up to Answer
Loading Advertisement...
by: abuimadPosted on 2003-07-27 at 18:56:08ID: 9016609
This approch would make 2 bodies in your document (since every document has one body already even if the source is empty)
Use the innerHTML method instead:
document.body.innerHTML = bodyHTML; // where bodyHTML is a string containing the HTML you want placed in the body
Hope that helps