Alternatives to document.write

Asked 25/5, 2012 at 22:53 Answered 30/5, 2012 at 4:49

I am in a situation where it seems that I must use document.write in a javascript library. The script must know the width of the area where the script is defined. However, the script does not have any explicit knowledge of any tags in that area. If there were explicit knowledge of a div then it would be as simple as this:

<div id="childAnchor"></div>
<script ref...
 //inside of referenced script
 var divWidth = $("#childAnchor").width();
</script>

So, inside of the referenced script, I am thinking of doing using document.write like this:

<script ref...
 //inside of referenced script
 var childAnchor = "z_87127XNA_2451ap";
 document.write('<div id="' + childAnchor + '"></div>');
 var divWidth = $("#" + childAnchor).width();
</script>

However, I do not really like the document.write implementation. Is there any alternative to using document.write here? The reason that I cannot simply use window is that this is inside of a view which is rendered inside of a master view page. Window would not properly get the nested area width.

The area is pretty much in here:

<body>
 <div>
  <div>
   <div>
     AREA

The AREA has no knowledge of any of the other divs.

Momus answered 25/5, 2012 at 22:53 Comment(4)

Can you show a sample of your HTML mark up, and explain where the new stuff's being inserted and in response to what event? – Invasion 25/5, 2012 at 23:14

If you get the width right after creating the element, before the rest of the page has loaded, you'll probably get 0. You have to wait until the DOM is loaded, then the browser will already have calculated the layout (except for images). – Squeal 25/5, 2012 at 23:41

@DavidThomas - There is an example right there. 3 nested divs and then a script tag and that is all that is available. However, the 3 is really n, and n in this case is 3. It can vary and you cannot know how many there are. This is dynamic, not static. There is no event that will trigger this. When the script is first encountered, at the top of the script, will be a call to find the width. There is no new stuff, just trying to find the width of the parent div where this script is being referenced. This is part of an initialization process for a UI library. – Momus 27/5, 2012 at 19:55

@Squeal - That is incorrect. In both scenarios the div element is already loaded onto the DOM. Both methods already suggested in the question will yield the script's parent div's width. – Momus 27/5, 2012 at 19:58

This just occurred to me, and I remembered your question: the script code can find the script block it is in, so you can traverse the DOM from there. The current script block will be the last one in the DOM at the moment (the DOM still being parsed when the code runs).

By locating the current script block, you can find its parent element, and add new elements anywhere:

<!doctype html>
<html>
    <head>
        <style>
        .parent .before { color: red; }
        .parent .after { color: blue; }
        </style>
    </head>
    <body>
        <script></script>
        <div class="parent">
            <span>before script block</span>
            <script>
            var s = document.getElementsByTagName('script');
            var here = s[s.length-1];

            var red = document.createElement("p");
            red.className = 'before';
            red.innerHTML = "red text";
            here.parentNode.insertBefore(red, here);

            var blue = document.createElement("p");
            blue.className = 'after';
            blue.innerHTML = "blue text";
            here.parentNode.appendChild(blue);
            </script>
            <span>after script block</span>
        </div>
        <script></script>
    </body>
</html>

http://jsfiddle.net/gFyK9/2/

Note the "blue text" span will be inserted before the "after script block" span. That's because the "after" span does not exist in the DOM at the moment appendChild is called.

However there's a very simple way to make this fail.

Squeal answered 30/5, 2012 at 4:49 Comment(3)

this is a really nice solution, bravo :) how well has it been tested though? can i fully count on it? – Seigler 4/7, 2012 at 14:2

@Seigler No, this is just a proof of concept, I haven't tested it much. On the other hand, I don't see why it would fail in any browser, it's so simple. – Squeal 4/7, 2012 at 16:19

I just found out there's a very simple way to make it fail. – Squeal 19/1, 2013 at 2:36

There is no alternative to this method. This is the only way that the script can find the width of the element that it is nested in without knowing anything about the DOM that it is loaded into.

Using document.write() when used appropriately is legitimate. Although, appending a new element to the DOM is preferable, it is not always an available option.

Momus answered 27/5, 2012 at 20:3 Comment(0)

if you know which child element it is you can use the param nth child in jquery. otherwise youll need to iterate through them with each()

Peacoat answered 25/5, 2012 at 23:5 Comment(2)

How would I know where to stop when iterating with each()? How would I know I was in the correct div? – Momus 27/5, 2012 at 19:53

You can check the contents, style, class, id, parents, etc. every element has an un ique set of identifiers. which cgild it is, how far deep its nested, which properties it has, etc. – Peacoat 28/5, 2012 at 10:29

Create and append the child like this:

var el = document.createElement('div');
el.id='id';
document.body.appendChild(el);

However I'm not really sure what you want to do with this to get the width of whatever, it will probably return 0.

Giorgia answered 25/5, 2012 at 23:30 Comment(2)

This will not append the div into the nth nested div. It will instead be placed at the end of the body's list of children. – Momus 27/5, 2012 at 19:52

It would yield the width of the document. – Momus 27/5, 2012 at 20:0

Recommended topics

Hot tags