2

I want to create new DOM elements in a blank document which has no structure whatsoever (no root node either, I suppose). Basically like opening a new tab in the browser and creating its DOM from zero. Is this possible?

I've been searching through all the answers here and I've tried all the methods used in the past by others who asked similar questions. For example, I tried using: 

var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
var body = dom.createElement("body");
body.innerHTML = "<p>GG WP</p>";
dom.firstChild.appendChild(body);

It didn't work. Next, I've tried using this:

var doc = document.implementation.createHTMLDocument("New Document");
var p = doc.createElement("p");
p.innerHTML = "Javascript is easy, but I still suck at it";

Didn't work either. So, I tried using a DOMParser:

var parser = new DOMParser();
var doc = parser.parseFromString("<body>It still doesn't work.</body>", "text/html");

Note: I am looking for a method which creates DOM elements in an empty document which are rendered (preferrably in the current tab). Because everyone may have different new tab settings, the way I tested all the solutions was by opening a new tab and executing

document.write();

first, just to make sure the current tab document has no DOM structure whatsoever.

UPDATE: I found the answer in the link posted by Mehdi (What other options for replacing entire HTML document via W3C DOM?). This works:

document.open();
document.write('<html><body></body></html>');
document.close();
Community
  • 1
  • 1
dolanator
  • 180
  • 3
  • 13
  • when you say 'it didnt work' what does that mean? if you open an empty document in a browser I believe most browser will add the html/body dom elements for you. what's the problem you are trying to solve? – atmd Jul 06 '15 at 14:39
  • What are you trying to achieve? What didn't work? DOM is a tree structure, so it needs a root node. – Oriol Jul 06 '15 at 14:39
  • @atmd - By it didn't work I mean there's no element in the document when I check in the developer console. I'm just curious if JS can do this. – dolanator Jul 06 '15 at 14:43
  • @Oriol - I am aware of that, that's why I mentioned it in the question. Do you have any answer to this: can you add the root node using JS? – dolanator Jul 06 '15 at 14:45
  • "By it didn't work I mean there's no element in the document when I check in the developer console" when I run your first example I see a `p` tag inside the `body` as expected. – atmd Jul 06 '15 at 14:50
  • Do you see it in the console only, or in the developer console Elements tab too (in Chrome)? I see it in the console, but not in the document itself. I can post a pic to show this. – dolanator Jul 06 '15 at 14:56
  • If you want the new elements to be rendered in the current tab, just append them in the current document. Not sure why you want a new document. – Oriol Jul 06 '15 at 16:07
  • You can write a separate answer and approve it yourself. It gives you a badge :D – Mehdi Jul 06 '15 at 16:14
  • Hehe, yeah, but I have no actual merit in finding the answer. I just tested the solution in that link. – dolanator Jul 06 '15 at 16:16

2 Answers2

0

AFAIK, a browser tab will always have a document object, even if there is no HTML loaded. And in most browsers, that document will be HTML. My steps (in Chrome):

  1. Open new tab
  2. Navigate to about:blank
  3. Open developer console
  4. execute: document.removeChild(document.documentElement);
  5. create new element: var docEl = document.createElement("foobar");
  6. append new element: document.appendChild(docEl);

It would help to know what browser you're targeting. Chrome and Firefox, for example, have a DOM tree for new tabs. How exactly are you getting to your empty document?

Jeremy
  • 802
  • 6
  • 6
  • Well, navigating to about:blank seems to create a new blank document with a basic structure. So the browser does this for you. Interesting to know. – dolanator Jul 06 '15 at 15:00
0

To create a "blank" document:

var doc = document.implementation.createDocument(null, '', null);

To create a new element in that document:

var el = doc.createElement("foo");

To append the element to the document:

doc.appendChild(el);
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • I get the `foo` element only in the console. This is how I test: 1. Open a new browser tab, 2. Execute in the console `document.write()` to make sure you have a completely empty document. 3. Run the proposed code. – dolanator Jul 06 '15 at 15:21
  • @JSNoobsauce The new document is independent of the current one, so you are not supposed to see the contents of the new document in the current document. Please clarify what your desired result is. – Oriol Jul 06 '15 at 15:25
  • Well, I expect that the code would create DOM elements which are visible in the dev console in the Elements tab. Otherwise, if I try to append a new element to that element, I will get a reference error. I used `document.write()` first to make sure we all have the same testing ground, because everyone might have their own settings for a new tab (for example, for some people a new tab may create a new google search page, or a new about:blank page which has a basic DOM structure by default). – dolanator Jul 06 '15 at 15:25
  • @JSNoobsauce The Elements tab only shows the elements inside the current document. – Oriol Jul 06 '15 at 15:28
  • I see, so where is this new document instantiated? Does it launch in a new tab or where is it created? (Yes, I am aware the Elements tab shows only the DOM elements in the current tab). – dolanator Jul 06 '15 at 15:28
  • @JSNoobsauce No, the new document is just an "abstract" document. You can access it with JS, but its contents won't be rendered anywhere. – Oriol Jul 06 '15 at 15:31
  • Hm, I guess I have to qualify my initial question and make it clear that I am looking for a rendered document. Thanks. – dolanator Jul 06 '15 at 15:33