JavaScript 节点组装

Question

我正在尝试创建一个用于渲染 dom 元素的函数，但我似乎无法在添加之前组装多个 dom 元素。

我试过这个：http://jsfiddle.net/RruyA/1/ 而且我似乎无法用链接包装我的图片。

并且使用现在 innerHTMl 所在的 appendChild()（在小提琴中标有注释）会产生无效指针错误。

我有很多关于可能出了什么问题的理论，但还没有解决方案。帮助会摇滚！

这是完整的代码：

(function () {
    "use strict";

    function tag (name, attributes, contents) {
      var tag = {};
      tag.name = name;
      tag.attributes = attributes;
      tag.contents = contents
      tag.create = function () {
        tag.element = document.createElement(tag.name);
        for (var prop in tag.attributes) {
          tag.element.setAttribute(prop, tag.attributes[prop]);
        }
        // This is the problem:
        tag.element.innerHTML = contents;
      }
      tag.render = function () {
        document.body.appendChild(tag.element);
      }
      return tag;
    }

    var p = tag('p', {'id':'details', 'class':'red nice lovely'}, 'Once upon a time in a golden castle on a silver cloud...');
    var img = tag('img', {'src':'http://miyazakihayao.blog.com/files/2010/05/castle-in-the-sky-x1.jpg', 'width': '200px', 'alt':'Golden Castle'});
    img.create();
    img.render();
    p.create();
    p.render();
    var a = tag('a', {'href':'http://google.com', 'target':'_blank'}, img.element);
    a.create();
    a.render();


}());

Answer 1

您的问题是您试图以相同的方式添加文本和 HTML 元素。文本可以与 innerHTML 一起正常工作，尽管元素将被强制转换为字符串，appendChild 将添加 HTML 元素，但您需要将字符串包装在 TextNodes 中。

因此您可以在这些类型之间进行选择，并且效果很好。

// This is a solution
if (contents) {
  if (contents instanceof HTMLElement) {
    tag.element.appendChild(contents);
  }
  else {
    tag.element.innerHTML = contents;
  }
}