Question

我正在尝试创建一个渲染dom元素的函数，而且在添加之前我似乎陷入了组装多个dom元素的困境。

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

使用appendChild（），其中innerHTMl现在（在小提琴中用注释标记）会产生无效的指针错误。

我有一堆关于可能出错的理论，但还没有解决方案。帮助会摇滚！

这是完整的代码：

(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;
  }
}

JavaScript节点组装

1 个答案: