Question

我想嵌入并显示一个Flash文件。它与document.write一起工作正常，但是当我尝试使用AppendChild（文本）时，它不显示flash而是显示纯文本。使用什么DOM方法呢？

  <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>

Answer 1

因为您正在创建文本节点，而不是序列化HTML。

您可以将功能更改为...

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

Answer 2

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

乍一看，这种方法通常看起来不必要地嘈杂且毫无价值，但它与HTML的自然语法更加巧妙地集成在一起。如果您希望能够直接在您的文档中编写HTML，您可能会对像jQuery这样的框架感到满意，它允许使用以下语法：

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

但是，如果您只是将所有这些内容嵌入Flash中，请使用swfobject。

document.write和DOM element.AppendChild（text）之间的Javascript差异

2 个答案: