ID가있는 CreateElement?


288

이 div 항목에 ID를 부여하기 위해이 코드를 수정하려고하는데 Google에서 아무것도 찾지 못했지만 idName이 작동하지 않습니다. append 에 대한 내용을 읽었 지만 꽤 단순 해 보이는 작업에는 꽤 복잡해 보이므로 대안이 있습니까? 감사 :)

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

4
아니면 당신은 의미 g.id = 'foo';합니까?
Šime Vidas

1
나는 이제 내가 사다리를 의미한다는 것을 안다 :)
pufAmuf

3
이 Google 검색 은 몇 가지 합리적인 결과를 반환합니다.
Felix Kling

답변:


522

다음 .setAttribute()방법을 사용해야합니다 .

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

4
이 코드를 사용하여 요소 ID뿐만 아니라 요소의 모든 속성에 대해서도 작성합니다.
Mai

3
@Mai 더 설명해 주시겠습니까? 문장을 이해할 수 없습니다.
mystrdat

15
@mystrdat Mai가 setAttribute ()를 사용하여 id뿐만 아니라 요소의 다른 속성을 만들 수 있다고 말하고 있다고 생각합니다.
척 L

94

g.id = 'desiredId'예제에서 생성 한 요소의 ID를 설정할 수 있습니다 .


나는 항상 코드가 적은 아나운서가 가장 좋습니다. 더 이상 촬영할 수 없습니다. 고마워.
m3nda


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 :)"]);

attr 또는 자식 요소에는 제한이 없습니다


7
표준 개체를 사용할 수있을 때 왜 지구상에서 자신의 구문 (구문 분석해야 함)으로 속성을 전달합니까? 또한 많은 요소를 생성해야하는 경우 템플릿 시스템 (예 : 핸들 바)이 필요하며 복잡한 기능은 필요하지 않습니다.
moonwave99

3
이 기능은 내 기능 중 첫 번째 기능이며 업데이트에 대해서는 생각하지 않았습니다. 나는 당신의 생각이 더 낫다고 생각하고 그것을 분명히 바꿀 것입니다. 고마워
Guja1501

7
올바른 정보이지만 추가 정보를 제공하고 다른 방법으로 진행해 주셔서 감사합니다. 매우 통찰력이 있습니다.
Fata1Err0r

15

왜 jQuery로 이것을하지 않습니까?

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

7
모든 사람이 jQuery를 사용할 수 있거나 사용하고 싶지는 않습니다. 그러나 만약 그가 있다면, var g = $ ( '<div id = "blah"class = "tclose">');
Bradley Mountford

24
@BradleyMountford : 그는 jQuery로 질문에 태그를 달았습니다. thay 's는 jQuery 솔루션을 제안했습니다
Shyju

2
사양에서 예약 키워드를 속성 이름으로 사용하는 것을 금지하지는 않지만 class따옴표로 묶는 것이 좋습니다 .
Felix Kling

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.