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

288

Я пытаюсь изменить этот код, чтобы также присвоить этому элементу div идентификатор, однако я ничего не нашел в Google, и idName не работает. Я читал кое - что о Append , однако это кажется довольно сложным для задачи , которая кажется довольно простым, так есть ли альтернатива? Спасибо :)

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

javascript jquery pufAmuf
источник

4

Или ты имеешь в виду g.id = 'foo';?

Шиме Видас

1

Теперь я знаю, что имел в виду лестницу :)

pufAmuf

3

Этот поиск Google возвращает некоторые разумные результаты.

Феликс Клинг

522

Вы должны использовать .setAttribute()метод:

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

lkaradashkov
источник

4

С помощью этого кода мы создаем не только идентификатор элемента, но и все атрибуты элемента.

Май

3

@ Май Можете ли вы объяснить дальше? Я не могу понять предложение.

Mystrdat

15

@mystrdat Я думаю, что Май пытается сказать, что setAttribute () может использоваться для создания других атрибутов элемента, а не только идентификатора.

Чак Л

94

Вы можете использовать g.id = 'desiredId'из своего примера, чтобы установить идентификатор элемента, который вы создали.

gddc
источник

Я всегда думаю, что ответ с меньшим количеством кода является лучшим. Больше выстрела не возможно. Спасибо.

m3nda

57

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

raina77ow
источник

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

Нет ограничений для атрибутов или дочерних элементов

Guja1501
источник

7

С какой стати вы передаете атрибуты со своим собственным синтаксисом [который вы должны анализировать], когда вы можете использовать стандартный объект? Кроме того, если вам нужно создать много элементов, вам нужна система шаблонов [например, рули] и не слишком сложные функции.

moonwave99

3

Эта функция одна из первых из моих функций, и я не думал об обновлении. Я думаю, что ваша идея лучше, и я обязательно изменю ее. Спасибо вам за это.

Guja1501

7

Хотя они правы, спасибо за предоставление дополнительной информации и альтернативных способов решения этой проблемы. Очень проницательно

Fata1Err0r

15

Почему бы не сделать это с JQuery?

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

Shyju
источник

7

не каждый может или хочет использовать jQuery. Но если бы он был, он мог бы просто сделать var g = $ ('<div id = "blah" class = "tclose">');

Брэдли Маунтфорд

24

@BradleyMountford: он отметил вопрос с помощью jQuery. это я предложил решение 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, чтобы вы могли нацелиться на него.

JLee365
источник

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

Ответы: