CreateElement з ідентифікатором?


288

Я намагаюсь змінити цей код, щоб він також дав ідентифікатор цього елементу div, однак я не знайшов нічого в google, а idName не працює. Я прочитав щось про додавання , однак це здається досить складним для завдання, яке здається досить простим, тож чи є альтернатива? Дякую :)

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

4
Або ти маєш на увазі g.id = 'foo';?
Šime Vidas

1
Тепер я знаю, що я мав на увазі сходи :)
pufAmuf

3
Цей пошук у Google дає певні розумні результати.
Фелікс Клінг

Відповіді:


522

Ви повинні використовувати .setAttribute()метод:

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

4
За допомогою цього коду ми створюємо не тільки ідентифікатор елемента, але і всі атрибути елемента.
травень

3
@Mai Чи можете ви пояснити далі? Я не можу зрозуміти речення.
mystrdat

15
@mystrdat Я думаю, що Май намагається сказати, що setAttribute () може бути використаний для створення інших атрибутів елемента, а не тільки ідентифікатора.
Чак L

94

Ви можете використовувати g.id = 'desiredId'зі свого прикладу для встановлення ідентифікатора створеного вами елемента.


Я завжди маю на увазі, що повідомлення, що має менше коду, є найкращим. Більше пострілу неможливо. Дякую.
м3нда


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">');
Бредлі Маунтфорд

24
@BradleyMountford: Він позначив це питання jQuery. thay я запропонував рішення jQuery
Shyju

2
Хоча специфікація не забороняє використання зарезервованих ключових слів як імен властивостей, можливо, все ж краще буде ставити classлапки.
Фелікс Клінг

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

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

спробуйте це ви хочете.


4

Я не впевнений, чи намагаєтесь ви встановити ідентифікатор, щоб ви могли його в CSS, але якщо це так, ви також можете спробувати:

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

g.className= "g";

і це назвать ваш div, щоб ви могли націлити його.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.