ID付きのCreateElement?


288

このコードを変更して、このdivアイテムにもIDを付与しようとしていますが、Googleで何も見つからず、idNameが機能しません。私はappendについて何かを読みましたが、かなり単純に見えるタスクではかなり複雑に思われるので、代替はありますか?ありがとう:)

g=document.createElement('div'); g.className='tclose'; g.v=0;

4
それともどういう意味g.id = 'foo';ですか?
サイムVIDAS

1
私は私がはしごを意味していることを今知っています:)
pufAmuf

3
このGoogle検索は、いくつかの妥当な結果を返します。
Felix Kling

回答:


522

あなたは.setAttribute()メソッドを使うべきです:

g = document.createElement('div');
g.setAttribute("id", "Div1");

4
このコードでは、要素IDだけでなく、要素のすべての属性についても作成しています。

3
@マイさらに説明できますか?文章が理解できません。
mystrdat 2017年

15
@mystrdat Maiは、setAttribute()を使用して、IDだけでなく要素の他の属性を作成できると言っていると思います。
チャックL

94

g.id = 'desiredId'例から使用して、作成した要素のIDを設定できます。


コードが少ないほうがいいといつも思っています。これ以上のショットは不可能です。どうも。
m3nda 2015


34

使用できます Element.setAttribute

例:

g.setAttribute("id","yourId")

g.setAttribute("class","tclose")


これがこれをよりよくするための私の機能です:

function createElement(element, attribute, inner) {
  if (typeof(element) === "undefined") {
    return false;
  }
  if (typeof(inner) === "undefined") {
    inner = "";
  }
  var el = document.createElement(element);
  if (typeof(attribute) === 'object') {
    for (var key in attribute) {
      el.setAttribute(key, attribute[key]);
    }
  }
  if (!Array.isArray(inner)) {
    inner = [inner];
  }
  for (var k = 0; k < inner.length; k++) {
    if (inner[k].tagName) {
      el.appendChild(inner[k]);
    } else {
      el.appendChild(document.createTextNode(inner[k]));
    }
  }
  return el;
}

例1:

createElement("div");

これを返します:

<div></div>

例2:

createElement("a",{"href":"http://google.com","style":"color:#FFF;background:#333;"},"google");`

これを返します:

<a href="http://google.com" style="color:#FFF;background:#333;">google</a>

例3:

var google = createElement("a",{"href":"http://google.com"},"google"),
    youtube = createElement("a",{"href":"http://youtube.com"},"youtube"),
    facebook = createElement("a",{"href":"http://facebook.com"},"facebook"),
    links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);

これを返します:

<div id="links">
    <a href="http://google.com">google</a>
    <a href="http://youtube.com">youtube</a>
    <a href="http://facebook.com">facebook</a>
</div>

新しい要素を作成して属性を設定し、子を追加できます

createElement("tag",{attr:val,attr:val},[element1,"some text",element2,element3,"or some text again :)"]);

属性または子要素に制限はありません


6
標準オブジェクトを使用できるのに、なぜ自分の構文[解析する必要がある]を使用して属性を渡すのですか?さらに、多くの要素を作成する必要がある場合は、テンプレートシステム[ハンドルバーなど]が必要であり、関数が複雑すぎないことが必要です。
moonwave99 14

3
この機能は私の機能の最初の1つであり、更新については考えていません。私はあなたのアイデアの方がいいと思いますし、絶対に変えます 有難うございます。
Guja1501 14

7
それらは正しいですが、追加の情報とそれを処理する別の方法を提供してくれてありがとう 非常に洞察力があります。
Fata1Err0r 2015

15

jQueryでこれを行わないのはなぜですか?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})

7
誰もがjQueryを使用できるわけではありません。しかし、もしそうなら、彼はvar g = $( '<div id = "blah" class = "tclose">');
Bradley Mountford、2012

24
@BradleyMountford:彼は質問にjQueryのタグを付けました。私はjQueryソリューションを提案しました
Shyju

2
仕様では、予約済みキーワードをプロパティ名として使用することは禁止されていませんがclass、引用符で囲む方がよい場合があります。
Felix Kling、2012

5
var element = document.createElement('tagname');    

element.className= "classname";
element.id= "id";

これを試してみてください。


4

CSSでスタイルを設定できるようにIDを設定しようとしているのかどうかはわかりませんが、そうである場合も試してみてください。

var g = document.createElement('div');    

g.className= "g";

そして、それはあなたがそれをターゲットにすることができるようにあなたのdivに名前を付けるでしょう。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.