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