代码之家  ›  专栏  ›  技术社区  ›  KatieK

使用javascript(appendchild)将新元素添加到DOM中

  •  8
  • KatieK  · 技术社区  · 16 年前

    有时我需要向现有的HTML页面添加元素(例如新的链接和图像),但我只能访问页面的一小部分,而不需要在其中插入元素。我想使用基于dom的javascript技术,并且必须避免使用document.write()。

    到目前为止,我一直在使用这样的工具:

    //  Create new image element
    var newImg = document.createElement("img");
      newImg.src = "images/button.jpg";
      newImg.height = "50";
      newImg.width = "150";
      newImg.alt = "Click Me";
    //  Create new link element
    var newLink = document.createElement("a");
      newLink.href = "/dir/signup.html";
    //  Append new image into new link
    newLink.appendChild(newImg);
    //  Append new link (with image) into its destination on the page
    document.getElementById("newLinkDestination").appendChild(newLink);
    

    有没有一种更有效的方法可以用来完成同样的事情?这一切似乎都是必要的,但我想知道是否有更好的方法可以做到这一点。

    4 回复  |  直到 16 年前
        1
  •  13
  •   mati    16 年前

    有一种更有效的方法,如果可能的话,似乎正在使用文档片段。 过来看: http://ejohn.org/blog/dom-documentfragments/ . 而且,这种方式应该比开始混合巨大的字符串文本并将它们设置为其他一些DOM对象的innerhtml更不容易出错,更易于维护。

        2
  •  6
  •   dplass    16 年前

    小心点,那 innerHTML 既不规范又臭名昭著 buggy .

        3
  •  2
  •   Tim Down    16 年前

    没什么问题。使用 innerHTML 速度会稍微快一点,字符可能会少一点,但对于这种规模的内容来说,这是不明显的,我个人的偏好是使用更标准、统一支持、更安全的DOM方法和属性。

    一个小问题: height width 性质 <img> 元素应该是数字而不是字符串。

        4
  •  1
  •   edl    16 年前

    如果你没有增加很多东西,你做的方式是理想的vs InnerHTML。如果您经常这样做,您可能只需要创建一个通用的函数/对象,它将相关的信息作为参数,并执行肮脏的工作。工业工程

    function addImage(src,width,height,alt,appendElem,href) {...}
    

    我经常在我自己的项目中使用原型来节省时间。