Javascript difference between document.write and DOM element.AppendChild(text)

Question

I want to embed and show a flash file. It works fine with document.write but when I tried with AppendChild(text) it doesn't show flash but pure text instead. What DOM method to use instead ?

  <html>
  <head>
 <script>
  function addText(text,elementId){
    if (document.createTextNode){
      var mytextNode=document.createTextNode(text)
      document.getElementById(elementId).appendChild(mytextNode)
    }
  }

    </script>

  </head>

  <body>

                <div id="test">

                </div>

  <script>
      addText("<embed height='100' width='100' type='application/x-shockwave-flash' allowscriptaccess='always' wmode='transparent' quality='high' swliveconnect='true' name='test' id='test' src='test.swf'>",'test');
  </script>     
  </body></html>

This might help http://stackoverflow.com/questions/367214/document-write-vs-inserting-dom-nodes-preserve-form-information — Narendra Yadala, Oct 20 '11 at 03:38

alex · Answer 1 · 2011-10-20T03:47:56.007

2

Because you are creating a text node, not serialised HTML.

You could change the function to...

function addHTML(html, elementId) {
    if (document.createElement) {

        var holder = document.createElement('div');

        holder.innerHTML = html;

        var target = document.getElementById(elementId);

        while (holder.hasChildNodes()) {
            target.appendChild(holder.firstChild);
        }
    }
}

jsFiddle.

edited Oct 20 '11 at 03:47

answered Oct 20 '11 at 03:38

alex

479,566
201
878
984

Thank you very much it's unfortunate one cannot check 2 good answers. – user310291 Oct 20 '11 at 18:24

score 2 · Accepted Answer · answered Oct 20 '11 at 03:40

(function () {
    var myEmbed = document.createElement("embed");
    myEmbed.type="application/x-shockwave-flash";
    myEmbed.height='100';
    myEmbed.width='100';
    …
    document.getElementById("test").appendChild(myEmbed);
}());

At first glance such an approach can often seem unnecessarily noisy and worthless, but it integrates much more sanely with the natural syntax of HTML. If you want to be able to write HTML directly into your document, you might be happier with a framework like jQuery, which allows syntax like:

$("<embed src='…'/>")

However, if you're just doing all this to embed Flash, use swfobject.

Both answers are good, I attributed to you because you have less points ;) — user310291, Oct 20 '11 at 18:23
LOL, that's a funny reason. I'll give @alex a +1 to help keep things balanced. :P — kojiro, Oct 20 '11 at 18:26

Javascript difference between document.write and DOM element.AppendChild(text)

2 Answers2