CODEWITHSUNDEEP
javascriptjquery
pufAmuf
pufAmuf

Reputation: 7795

CreateElement with id?

I'm trying to modify this code to also give this div item an ID, however I have not found anything on google, and idName does not work. I read something about append, however it seems pretty complicated for a task that seems pretty simple, so is there an alternative? Thanks :)

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

Upvotes: 450

Views: 762978

Answers (9)

Md Khairul Islam
Md Khairul Islam

Reputation: 461

window.addEventListener('DOMContentLoaded', (event) => {
    var g = document.createElement('div');
    g.setAttribute("id", "google_translate_elementMobile");
    
  document.querySelector('Selector will here').appendChild(g);
});

Upvotes: 4

hasan darwish
hasan darwish

Reputation: 174

that is simple, just to make a new element with an id :

var myCreatedElement = document.createElement("div");
var myContainer = document.getElementById("container");

//setAttribute() is used to create attributes or change it:
myCreatedElement.setAttribute("id","myId");

//here you add the element you created using appendChild()
myContainer.appendChild(myCreatedElement);

that is all

Upvotes: 6

Guja1501
Guja1501

Reputation: 1028

You can use Element.setAttribute

Examples:

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

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

Here's my function for doing this better:

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;
}

Example 1:

createElement("div");

will return this:

<div></div>

Example 2:

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

will return this:

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

Example 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]);

will return this:

<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>

You can create new elements and set attribute(s) and append child(s)

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

There is no limit for attr or child element(s)

Upvotes: 58

lkaradashkov
lkaradashkov

Reputation: 8889

You should use the .setAttribute() method:

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

Upvotes: 818

Lol Super
Lol Super

Reputation: 103

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

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

try this you want.

Upvotes: 8

JLee365
JLee365

Reputation: 259

I'm not sure if you are trying to set an ID so you can style it in CSS but if that's the case what you can also try: 

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

g.className= "g";

and that will name your div so you can target it.

Upvotes: 3

raina77ow
raina77ow

Reputation: 106375

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

Upvotes: 82

Shyju
Shyju

Reputation: 218722

Why not do this with jQuery?

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

Upvotes: 16

g.d.d.c
g.d.d.c

Reputation: 47968

You can use g.id = 'desiredId' from your example to set the id of the element you've created.

Upvotes: 159

Related Questions