1

このdojo行と同じ結果を提供できる最短の構文を探しています。

var divblock5 = dojo.create("div", {className: "barlittle", id: "block5"});

しかし、dojoフレームワークの代わりにプレーンJavaScriptを使用したいと思います。動的な要素をたくさん作成しているので、コードをできるだけ短くしたいと思います。

4

5 に答える 5

11 
var create = function(element, properties) {
    var elmt = document.createElement(element);
    for (var prop in properties) {
        elmt[prop] = properties[prop];
    }
    return elmt;
}

create("div", {className: "barlittle", id: "block5"});

または、単純にHTMLを取得してDOMノードに変換する私の個人的なお気に入り：

var elmtify(html) {
    var wrapper = document.createElement('div');
    wrapper.innerHTML = html;
    return wrapper.firstChild;
}

elmtify('<div class="barlittle" id="block5"></div>');
于 2013-01-28T15:14:51.350 に答える
1

これはまだ未解決の質問のように思われるので、トムが言ったのとほぼ同じ方法を追加していますが、私のアプローチではスタイル情報が考慮されています。

function createElement(tag, attrs) {
  if(!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

  var ele = document.createElement(tag), attrName, styleName;
  if(attrs) for(attrName in attrs) {
    if(attrName === "style")
      for(styleName in attrs.style) {ele.style[styleName] = attrs.style[styleName];}
    else
      ele[attrName] = attrs[attrName];
  }
  return ele;
}

したがって、ライブラリなしで通常作成する場合は、次のようになります。

var divBlock5 = document.createElement("div");
divBlock5.className = "barlittle";
divBlock5.id = "block5";

トムが提供したスニペットを使用すると、次のように記述できます。

var divBlock5 = createElement("div", {className:"barlittle", id:"block5"});

ただし、要素に独立したスタイルを追加したいとします。次に、私の追加で、あなたは次のように書きます：

var divBlock5 = createElement("div", {className:"barlittle", id:"block5", style:{color:"#08A", fontWeight:"bold"}});

お役に立てれば。乾杯！

于 2014-03-31T03:34:36.283 に答える
0 
createElement = function(type, className, id) {
    var element = document.createElement(type);
    element.className = className;
    element.id = id;

    return element;
}
于 2013-01-28T15:16:05.473 に答える
0

put-selectorを確認する必要があります：https ：//github.com/kriszyp/put-selector 。

于 2013-01-28T19:03:15.847 に答える
0 
function createElement(tag, attrs, html) {
    if (!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

    var ele = document.createElement(tag),
        attrName, styleName;
    if (attrs)
        for (attrName in attrs) {
            if (attrName === "style")
                for (styleName in attrs.style) { ele.style[styleName] = attrs.style[styleName]; }
            else if (attrs[attrName])
                ele.setAttribute(attrName, attrs[attrName]);
        }
    if (html)
        ele.innerHTML = html;
    return ele;
}

このソリューションは、TomとXch3lが提案したものに基づいていますが、DOM要素に適用されるカスタム属性を渡すためのサポートが追加されています。特定のDOM要素のプロパティとしてどの属性が存在するかは、DOM要素のタイプによって異なるため、要素のsetAttributeメソッドを使用する方がより堅牢なソリューションです。

「className」の代わりに「class」属性を渡す必要があることに注意してください。また、このソリューションでは、3番目のパラメーターとして渡すことができるオプションのHTML文字列のサポートも追加されます。

関数の使用方法の例を次に示します。

var divBlock5 = createElement("div", {class:"barlittle", "data-my-custom-attribute":"lorem ipsum", id:"block5", style:{color:"#08A", fontWeight:"bold"}},`<h5>An Optional String of HTML to be Inserted Inside the Newly Created Element</h5><p>Preserve Line Spacing by Using Backticks Instead of Quotes</p>`);
于 2018-11-28T08:31:41.040 に答える