Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts

    ie10's treatment of document.write

    Does anyone know why ie 9 & 10 have difficulty with this:

    Code:
    function playVid(){
    document.write("<object classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\" codebase=\"http://www.apple.com/qtactivex/qtplugin.cab\" width=\"480\" height=\"336\">");
    document.write("<param name=\"src\" value=\"MOV/Lesson16.mov\">");
    document.write("<embed width=\"480\" height=\"336\" type=\"video/quicktime\" pluginspage=\"http://www.apple.com/quicktime/download/\" src=\"MOV/Lesson16.mov\"></embed>");
    document.write("</object>");
    document.close();
    }
    ...but can handle this:

    Code:
    function playVid(){
    document.write("<object classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\" codebase=\"http://www.apple.com/qtactivex/qtplugin.cab\" width=\"480\" height=\"336\"><param name=\"src\" value=\"MOV/Lesson16.mov\"><embed width=\"480\" height=\"336\" type=\"video/quicktime\" pluginspage=\"http://www.apple.com/quicktime/download/\" src=\"MOV/Lesson16.mov\"></embed></object>");
    document.close();
    }
    As you can see, only one document.write is tolerated. Other browsers cope. ie9 & 10 require compatibility mode (which I don't wish to use!).

    Of course, I can use the second method, but why is it so?
    Last edited by tpeck; 09-16-2013 at 12:12 PM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Solve the problem by not using document.write().

    If you are using jQuery, use .append() or if you are using javascript, use document.createElement().
    Check out my blog and portfolio at http://calebprenger.com

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    The usual replacement for document.write is innerHTML. You need to replace the inner html in an element. You can still use document.write to write the element to the page.
    Code:
    document.write("<div id=\"video_container\"><\/div>");
    Then use innerHTML to put the other code inside it.
    Last edited by DrDOS; 09-17-2013 at 02:31 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by DrDOS View Post
    The usual replacement for document.write is innerHTML. You need to replace the inner html in an element. You can still use document.write to write the element to the page.
    Code:
    document.write("<div id="video_container"><\/div>");
    Then use innerHTML to put the other code inside it.
    Using innerHTML is usually not the way things are done anymore. Like i said, using createElement or append is the way
    Check out my blog and portfolio at http://calebprenger.com

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by pdiddles03 View Post
    Using innerHTML is usually not the way things are done anymore.
    wtf? ok, how are things usually done now, and on what is this seemingly comedic response based?
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #6
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by rnd me View Post
    wtf? ok, how are things usually done now, and on what is this seemingly comedic response based?
    If you paid attention to my first reply, you would have found out how to do this. Today it's done with using javascript's createElement or jQuery's .append().

    The reason you don't want to use document.write is because it's harder to control where it will end up. if you just type

    document.write("<div style='height: 50px; width: 50px;'>blah blah</div>");

    it will just end up in the body of the document. innerHTML is slower to use then other solutions and also is not considered a w3c standard. Using the createElement, you can insert it wherever you would like.
    Code:
    <div id="container"></div>
    
    <script>
     
    var container=document.getElementById('container');
    var newDiv = document.createElement('newDiv');
    container.appendChild(newDiv);
    
    
    
    </script>
    Easier yet if you use the jQuery library, use this code:

    Code:
     $("#container").append("<div>This is a div inserted into another div with the ID container.</div>");
    There is no reason to use profanity or make a sarcastic comment.
    Check out my blog and portfolio at http://calebprenger.com

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    You don't need a bulldozer to hammer a nail. So why you do drag jQuery into this very simple coding problem ? Create element certainly has its place, such as when you want to add input elements into an upload form, but it's hardly called for here. How many movies is someone going to watch at a time ? Do you do things just because it's new and trendy ? On the web it's best do things that work.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by DrDOS View Post
    You don't need a bulldozer to hammer a nail. So why you do drag jQuery into this very simple coding problem ? Create element certainly has its place, such as when you want to add input elements into an upload form, but it's hardly called for here. How many movies is someone going to watch at a time ? Do you do things just because it's new and trendy ? On the web it's best do things that work.
    createElement is not "new" & "Trendy", it's standard. I prefer sticking with standards if i can, thanks. document.write is not a good thing to use and will just cause future problems.

    Also, doing "things that work" causes huge headaches later on. I don't know how many websites I have worked on that has done "things that worked" at the time, but no longer do. Tables work for layouts, does not mean you should do it.
    Last edited by pdiddles03; 09-16-2013 at 06:32 PM. Reason: expand on answer
    Check out my blog and portfolio at http://calebprenger.com

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    what is this, 2009?

    1. w3 is ok with innerHTML, and has been for about 5 years now:
    http://www.w3.org/TR/2008/WD-html5-20080610/dom.html


    2. jthe Query's append() method you recommend uses innerHTML internally if you pass it a string, checkout the first return potential of $().domManip (hit via $().append) to see for yourself. so what is the point: don't use innerHTML without 120kb of extra code?

    i don't see how much faster a createElement() call can be -vs- an innerHTML call to add an embed, both would take less than 1ms i would expect.

    when doing a lot of work, innerHTML has always been faster in my experience. if you can find a live benchmark that shows createElement() being faster than innerHTML at adding more than a couple things into the DOM, please share us a link; i'd like to see that.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #10
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Dude, any javascript class and book will tell you not to use it. Being a "senior coder" yourself, you should know this. As for jQuery using innerHTML, i wouldn't know, I never checked into how jQuery does it, but it's still easier to append something to a specific tag or the body itself using jQuery and yes there is a performance issue, you of all people should know this.
    Check out my blog and portfolio at http://calebprenger.com

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by glenngv View Post
    According to what you just posted, .appendChild was used which i have been saying.
    Check out my blog and portfolio at http://calebprenger.com

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by pdiddles03 View Post
    Dude, any javascript class and book will tell you not to use it. Being a "senior coder" yourself, you should know this. As for jQuery using innerHTML, i wouldn't know, I never checked into how jQuery does it, but it's still easier to append something to a specific tag or the body itself using jQuery and yes there is a performance issue, you of all people should know this.
    as a senior coder, i've seen more than my share of outmoded advice and unchecked assumptions over the years. If XHTML had won, then i might agree with you. But HTML5 won instead, and innerHTML is a first-class citizen of the HTML5 API. Most of the anti-innerHTML propaganda was written back before it worked on firefox v1.5... Some of it was written after, mostly by IE apologists working under the guise of cross-browser compatibility. It took IE quite a while to get everything working correct with innerHTML (think tables, select, input, etc).

    given that IE7 is no longer targeted or supported by any major web developers, i don't see any good reason not to use the simplest and best tools for the job. Even fallbacks and double-coding for non-innerHTML browsers is a waste of development time, unless you care more about the experience of 1/500 visitors than you do 499/500 visitors.

    i would not recommend paper books be used to learn web technologies, for reasons you inadvertently point out. A good JS book is an oxymoron. There are a few titles since 2011 that look OK, but F11 is always much more up to date. 6 weeks may be a whole cycle to browsers, but it's not even a typical proofreading period to publishers...


    virtually all of my experience has taught me that innerHTML is faster, usually much faster than appendChild. template packages like mustache, handlebars, and backbone use it, as does jQuery. Given how much jQuery runs everywhere, why would they use something that didn't work or was slow, and why haven't we heard the uproar if that was the case? common sense says it must be ok, given its footprint.

    The sheer reduction in user-land js objects is enough to tip the scales in terms of ram use between the two. i also tend to associate createElement with loops, the slowest part of any JS code, and a construct typically not needed when using innerHTML. these dom-construction loops tend to spike ram usage, which can cause other parts of JS to slow down.

    Also consider that appending a single element causes repaint, the slowest part of HTML rendering, and something to be avoided at all possible. by building one chunk of html, an entire interface screen can be rendered with one repaint using innerHTML. that's impossible to do with createElement() unless you don't need pre-bound js and all your additions are siblings, in which case createDocumentFragment can construct the entire chunk. but that's rare in my experiance, and using createDocumentFragment for little chunks is cumbersome and uses lots of ram compared to a string.

    for CPU, consider that engines are optimized to turn string HTML into DOM, just like a webpage, so it would be surprising to me if you found a benchmark to the contrary. I don't expect that you will, but it would be something i'd like to kick the tires of if you don't hate me for disagreeing with you.


    in short, there's a lot of bad advice out there in JS land, probably because it wasn't taken seriously until late. The only way to know what's best is to get out there and try stuff, don't count on book authors to know what they are talking about; they often don't. don't count on common knowledge being correct either, it's often wrong and misguided.

    at most generous, "trust, but verify".
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    innerHTML vs createElement performance test:

    http://jsperf.com/innerhtml-vs-createelement-test/30
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by pdiddles03 View Post
    According to what you just posted, .appendChild was used which i have been saying.
    almost. did you read the source, or just see your keyword and declare yourself right?

    you pass a string to append() in your code, which means that nodeType==undefined, not 1. that defers it to domManip , and eventually to buildFragment.

    follow the arg:

    $().append
    Code:
    function() {
    	return this.domManip(arguments, !0, function(a) {
    		this.nodeType === 1 && this.appendChild(a)
    	})
    }
    now, your string,"<div>This is a div inserted ..." is being passed to domManip as arguments[0][0]:
    domManip
    Code:
    function(a, c, d) {
    	var e, g, h, i, j = a[0],
    		k = [];
    	if (!f.support.checkClone && arguments.length === 3 && typeof j == "string" && bd.test(j)) return this.each(function() {
    		f(this).domManip(a, c, d, !0)
    	});
    	if (f.isFunction(j)) return this.each(function(e) {
    		var g = f(this);
    		a[0] = j.call(this, e, c ? g.html() : b), g.domManip(a, c, d)
    	});
    	if (this[0]) {
    		i = j && j.parentNode, f.support.parentNode && i && i.nodeType === 11 && i.childNodes.length === this.length ? e = {
    			fragment: i
    		} : e = f.buildFragment(a, this, k), h = e.fragment, h.childNodes.length === 1 ? g = h = h.firstChild : g = h.firstChild;
    		if (g) {
    			c = c && f.nodeName(g, "tr");
    			for (var l = 0, m = this.length, n = m - 1; l < m; l++) d.call(c ? bi(this[l], g) : this[l], e.cacheable || m > 1 && l < n ? f.clone(h, !0, !0) : h)
    		}
    		k.length && f.each(k, bp)
    	}
    	return this
    }
    it hits the first conditional and is passed back to domManip. the seciond time in, it skips the first conditional since arg.length!=3. it skips the 2nd conditional because j, aka arguments[0][0] is not a function, it's a string.

    but, it hits the next conditional, this[0] ?, and follows from there into buildFragment.
    you can see that build fragment clearly uses innerHTML:

    Code:
    // Convert html into DOM nodes
                } else {
                    tmp = tmp || safe.appendChild(context.createElement("div"));
    
                    // Deserialize a standard representation
                    tag = (rtagName.exec(elem) || ["", ""])[1].toLowerCase();
                    wrap = wrapMap[tag] || wrapMap._default;
    
                    tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];
    ...


    if you are going to drop bombs like "Using innerHTML is usually not the way things are done anymore", it behooves you not to recommend tools that themselves use innerHTML...
    Last edited by rnd me; 09-16-2013 at 08:06 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •