CreateElement with id?
Sophia Terry
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; 3 8 Answers
You should use the .setAttribute() method:
g = document.createElement('div');
g.setAttribute("id", "Div1"); 4 You can use g.id = 'desiredId' from your example to set the id of the element you've created.
var g = document.createElement('div');
g.id = 'someId'; 0 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":"","style":"color:#FFF;background:#333;"},"google");`will return this:
<a href="">google</a>Example 3:
var google = createElement("a",{"href":""},"google"), youtube = createElement("a",{"href":""},"youtube"), facebook = createElement("a",{"href":""},"facebook"), links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);will return this:
<div> <a href="">google</a> <a href="">youtube</a> <a href="">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)
3Why not do this with jQuery?
var newDiv= $('<div/>', { id: 'foo', class: 'tclose'}) 3 var element = document.createElement('tagname');
element.className= "classname";
element.id= "id";try this you want.
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.
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
1