Develop Reference

JS calling ID by variable

Hi All
First data:
let NewDivForGame_0 = document.createElement('div');
let NewDivForGame_1 = document.createElement('div');
let NewDivForGame_2 = document.createElement('div');
and so on...12
Next:
NewDivForGame_0.id = 'Key';
NewDivForGame_1.id = 'string_1';
NewDivForGame_2.id = '1a1';
and so on...12
Next: append.
Next:
for (i=0;i<=12;i++){
document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);
It doesn't work. Help me please. Please write a solution.
tried:
1)document.getElementById("NewDivForGame_"+i.id).style.width = "35px"; //ERROR
2)document.getElementById("NewDivForGame_"+[i].id).style.width = "35px"; //ERROR
3)
let DetectPer = "NewDivForGame_";
document.getElementById(DetectPer+i.id).style.width = "35px"; //ERROR
It doesn't work. Help me please. Please write a solution.

Another example, maybe not so short as then one of #mplungjan, but it shows how it can be done differently.
If You want to create elements you can use simple for loop to do it, but then you need to add them to DOM as a child of other DOM element.
In example below I've added first 'div' as a child of body, second as child of first and so on.
Because all elements references where stored in newDivForGame array we can use it to change style properties using simple for loop.
{
const newDivForGame = [];
for (let i = 0; i < 12; ++i) {
newDivForGame.push(document.createElement('div'));
newDivForGame[i].id = `key${i}`;
document.body.appendChild(newDivForGame[I]);
}
for (const elem of newDivForGame) {
elem.style.width = '35px';
elem.style.height = '35px';
elem.style.background = 'blue';
}
}

You cannot build your selectors like that - it is wishful thinking.
To do what you are trying you would need eval, or worse:
window["NewDivForGame_"+i].id
Neither which are recommended
Why not access them using querySelectorAll, here I find all elements where the id starts with NewDivForGame
document.querySelectorAll("[id^=NewDivForGame]").forEach(div => {
div.style.width ="35px";
div.style.height= "35px"; //ERROR
div.style.backgroundColor = "blue";
})
or use css and a class
.blueStyle {
width: 35px;
height: 35px;
background-color: blue;
}
and do
NewDivForGame.classList.add("blueStyle")
or
document.querySelectorAll("[id^=NewDivForGame]").forEach(div => div.classList.add("blueStyle"))

The main problems with your code are these lines:
for (i=0;i<=12;i++){
document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);
...
From what I can tell, you're attempting to access your variables by expecting your browser to evaluate the result of concatenating a string with a number.
Aside from that, you're attempting to access the id property from i, which as it stands, is a number. The number primitive does not have an id property, but based on your code it seems you might have been mixing it up with your string/eval assumption.
Lastly, your line of [i] was actually creating an array with the number i being the single and only element. Arrays likewise do not have an id property.
(Un)Fortunately, Javascript doesn't work this way. At least not exactly that way; in order for the browser or container to do what you expect, there's a few methods that could be used, but I'm only going to reference two; the dreaded eval(), which I won't get into due it being a dangerous practice, and an object literal definition. There are of course other ways, such as the other existing answer(s) here, but:
// Here, we define an object literal and assign it properties for each div manually.
let gameDivs = {
NewDivForGame_0: document.createElement('div'),
NewDivForGame_1: document.createElement('div'),
// etc
};
// And then assign the id values sort of like you do in your question;
gameDivs.NewDivForGame_0.id = 'Key';
gameDivs.NewDivForGame_1.id = 'string_1';
gameDivs.NewDivForGame_2.id = '1a1';
// etc
for (i=0;i<=12;i++){
// Before finally using square bracket notation to target the
// properties by a dynamic name;
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.width ="35px";
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.height= "35px";
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);
}
Of course, you don't even need to select them by their id if you have the reference to them, which you do:
for (i=0;i<=12;i++){
// Before finally using square bracket notation to target the
// properties by a dynamic name;
gameDivs["NewDivForGame_"+i].style.width ="35px";
gameDivs["NewDivForGame_"+i].style.height= "35px";
gameDivs["NewDivForGame_"+i].style.backgroundColor = "blue";
console.log('Create size div run #'+i);
}
This example assumes the divs are appended to the document.
This methodology uses square brackets on an object literal. As you may, or may not be aware, square brackets should be used when accessing an object's property in a dynamic way, such as what you were trying to do with string concatenation earlier.
Due to the way objects behave, you could even go so far as to generate the divs with a for-loop and then add them to the object:
let gameDivs = {};
for (let i = 0; i<=12; i++) {
let gameDiv = document.createElement('div');
gameDivs["NewDivForGame_"+i] = gameDiv;
// append them too;
document.body.appendChild(gameDiv);
}
Of course, I have no idea what pattern you're using for creating element ids, but in general the above would work.

Alter unappened element's html tag type with javascript

So I have an element created by another process, created in a method akin to
var their_element = document.createElement("div");
/* Lots of stuff is done to their_element */
And that object is being passed to me later. It has not been appended anywhere yet. The problem is, I need it to be different html tag type when it finally hits the html, such as:
<form></form>
How do i change it? The solutions I have found involve editing after it's appended, not before.
Edit:
Also, learned nodeName can't be assigned for this.
their_element.nodeName = "FORM"
doesn't work.
Also, this doesn't work either:
their_element.tagName = "FORM"
Also this didn't work either:
var outside = their_element.outerHTML;
outside = outside.replace(/div/g, 'form');
their_element.outerHTML = outside;
All of these still leave it as a DIV when appended.
(And I'm not looking for jQuery)

Check on this for cross-browser compatability, but there are properties and methods on elements that could be of use. Particularly, Element.attributes, Element.hasAttributes(), and Element.setAttribute(). See: https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
I'm not going to use ES6 here, so we don't have to worry about transpiling. You can update if you want:
var el = document.createElement('div');
el.id="random";
el.style.background="red";
el.style.width="200px";
el.style.padding="10px";
el.style.margin="10px";
el.innerHTML="<input type='submit' value='submit'>";
console.log({"Element 1": el});
var newEl = document.createElement('form');
console.log({"Element 2 Before Transformation": newEl})
if (el.hasAttributes()) {
var attr = el.attributes
for (var i = 0; i < attr.length; i++) {
var name = attr[i].name, val = attr[i].value;
newEl.setAttribute(name, val)
}
}
if (el.innerHTML) { newEl.innerHTML = el.innerHTML }
console.log({"Element 2 After Transformation": newEl})
document.body.append(el);
document.body.append(newEl);
There are certain properties you need to account for like innerHTML, innerText, and textContent that would overwrite one another if multiples are set. You may also have to account for childNodes and what not.

Using JavaScript & jQuery in a single function (Nodes & Stuff)

I am currently learning jQuery. I know that jQuery is a custom library for JavaScript.
I am doing some learning examples in a book that is only using JavaScript, and to further my learning experience, I am trying to make use of jQuery for anything that might be more efficient.
So, I have this code:
function addLetter(foo) {
$(foo).unbind('click');
var tileLetter = $(foo).attr('class').split(' ');
var letter = tileLetter[2].charAt(1);
if (document.getElementById('currentWord').childNodes.length > 0) {
$('#currentWord p').append(letter);
} else {
var p = document.createElement('p');
var txt = document.createTextNode(letter);
p.appendChild(txt);
$('#currentWord').append(p);
}
}
Question #1:
If I change document.getElementById('currentWord').childNodes.length to $('#currentWord').childNodes.length it doesn't work. I thought the jQuery selector was the same thing as the JS document.getElementById as that it brought me back the DOM element. If that was the case, it'd make sense to be able to use the .childNodes.length functions on it; but it doesn't work. I guess it's not the same thing?
Question #2:
The code is textbook code. I have added all the jQuery that there is in it. My jQuery knowlede is limited, is there a more efficient way to execute the function?
The function's purpose:
This function is supposed to create a p element and fill it with a Text Node if it's the first time it's run. If the p element has already been created, it simply appends characters into it.
This is a word generating game, so you click on a letter and it gets added to a 'currentWord' div. The tile's letter is embedded in the 3rd css class, hence the attr splitting.
Thanks!

document.getElementById('currentWord')
returns a DOM object whereas $('#currentWord') returns a DOM object wrapped inside a jQuery object.
To get the plain DOM object you can do
$('#currentWord').get(0)
So
$('#currentWord').get(0).childNodes.length
should work.

Question #1:
jQuery returns a jQuery object. To return it to a regular javascript object use $(object)[0] and you can then treat it as a plain javascript (or DOM) object.
Question #2:
The efficiency looks good to me. Although you might want to use spans instead of p elements.
I guess one thing you could do (even though yours looks to run very fast) is cache the dom element:
function addLetter(foo) {
$(foo).unbind('click');
var tileLetter = $(foo).attr('class').split(' ');
var letter = tileLetter[2].charAt(1);
var currentWord = document.getElementById('currentWord');
if (currentWord.childNodes.length > 0) {
$(currentWord).find('p').append(letter);
} else {
var p = document.createElement('p');
p.innerHTML = letter;
currentWord.appendChild(p);
}
}

Calls to the jQuery() function ($()) return a jQuery object containing the matching elements, not the elements themselves.
Calling $('#some-id') will, then, return a jQuery object that contains the element that would be selected by doing document.getElementById('some-id'). In order to access that element directly, you can get it out of that jQuery object, using either the .get() function or an array index syntax: $('#some-id')[0] (it's 0-indexed).

I think you can replace all of this with a call to the text function.
function addLetter(foo) {
$(foo).unbind('click');
var tileLetter = $(foo).attr('class').split(' ');
var letter = tileLetter[2].charAt(1);
var currentWordP = $('#currentWord p');
if (currentWordP.size() > 0) {
currentWordP.text(currentWordP.text() + letter);
} else {
$('#currentWord').append("<p>" + letter + "</p>");
}
}

1: Use $.get(0) or $[0] to get the DOM element. e.x. $('#currentWord')[0].childNodes.length.
2: Try this:
function addLetter(foo) {
$(foo).unbind('click');
var tileLetter = $(foo).attr('class').split(' ');
var letter = tileLetter[2].charAt(1);
if ($('#currentWord p').length > 0) {
$('#currentWord p').append(letter);
} else {
$('#currentWord').append(
$('<p />', { text: letter })
);
}
}

Question #1:
document.getElementById returns DOM object. more
childNodes.length is property of Node object which is returned by document.getElementById.
jQuery selector returns jQuery object more. You can get DOM object from jQuery object using .get
$('#IDselector').get(0) = document.getElementById('IDselector')
Question #2:
function addLetter(foo) {
$(foo).unbind('click');
var tileLetter = $(foo).attr('class').split(' ');
var letter = tileLetter[2].charAt(1);
if ($('currentWord p').length > 0) {
$('#currentWord p').append(letter);
} else {
var p = $('<p />').text(letter);
$('#currentWord').append(p);
}
}

how to get all parent nodes of given element in pure javascript?

I mean an array of them. That is a chain from top HTML to destination element including the element itself.
for example for element <A> it would be:
[HTML, BODY, DIV, DIV, P, SPAN, A]

A little shorter (and safer, since target may not be found):
var a = document.getElementById("target");
var els = [];
while (a) {
els.unshift(a);
a = a.parentNode;
}

You can try something like:
var nodes = [];
var element = document.getElementById('yourelement');
nodes.push(element);
while(element.parentNode) {
nodes.unshift(element.parentNode);
element = element.parentNode;
}

I like this method:
[...(function*(e){do { yield e; } while (e = e.parentNode);})($0)]
... where $0 is your element.
An upside of this method is that it can be used as a value in expressions.
To get an array without the target element:
[...(function*(e){while (e = e.parentNode) { yield e; }})($0)]

You can walk the chain of element.parentNodes until you reach an falsey value, appending to an array as you go:
const getParents = el => {
for (var parents = []; el; el = el.parentNode) {
parents.push(el);
}
return parents;
};
const el = document.querySelector("b");
console.log(getParents(el).reverse().map(e => e.nodeName));
<div><p><span><b>Foo</b></span></div>
Note that reversing is done in the caller because it's not essential to the lineage algorithm. Mapping to e.nodeName is purely for presentation and also non-essential.
Note that this approach means you'll wind up with the document element as the last element in the chain. If you don't want that, you can add && el !== document to the loop stopping condition.
The overall time complexity of the code above is linear and reverse() is in-place, so it doesn't require an extra allocation. unshift in a loop, as some of the other answers recommend, is quadratic and may harm scalability on uncommonly-deep DOM trees in exchange for a negligible gain in elegance.

Another alternative (based on this):
for(var e = document.getElementById("target"),p = [];e && e !== document;e = e.parentNode)
p.push(e);

I believe this will likely be the most performant in the long run in the most scenarios if you are making frequent usage of this function. The reason for why t will be more performant is because it initially checks to see what kind of depths of ancestry it might encounter. Also, instead of creating a new array every time you call it, this function will instead efficiently reuse the same array, and slice it which is very optimized in some browsers. However, since there is no really efficient way I know of to check the maximum depth, I am left with a less efficient query-selector check.
// !IMPORTANT! When moving this coding snippet over to your production code,
// do not run the following depthtest more than once, it is not very performant
var kCurSelector="*|*", curDepth=3;
while (document.body.querySelector(kCurSelector += '>*|*')) curDepth++;
curDepth = Math.pow(2, Math.ceil(Math.log2(startDepth))),
var parentsTMP = new Array(curDepth);
function getAllParentNodes(Ele){
var curPos = curDepth;
if (Ele instanceof Node)
while (Ele !== document){
if (curPos === 0){
curPos += curDepth;
parentsTMP.length <<= 1;
parentsTMP.copyWithin(curDepth, 0, curDepth);
curDepth <<= 1;
}
parentsTMP[--curPos] = Ele;
Ele = Ele.parentNode;
}
return retArray.slice(curPos)
}
The browser compatibility for the above function is that it will work in Edge, but not in IE. If you want IE support, then you will need a Array.prototype.copyWithin polyfill.

get all parent nodes of child in javascript array
let selectedTxtElement = document.getElementById("target");
let els = [];
while (selectedTxtElement) {
els.unshift(selectedTxtElement);
selectedTxtElement = selectedTxtElement.parentNode;
}
know more

Is there any way to find an element in a documentFragment?

var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF
How can I get "myId" before attaching fragment to document?

All of these answers are rather old, from back when querySelectorAll and querySelector were not widely available. It should be noted that these two functions which accept CSS selectors as parameters do work on DocumentFragments in modern browsers, and should be the preferred way of dealing with the situation in the question. The alternate solutions presented in some of the answers would be a good approach for legacy browsers which did not support querySelectorAll or querySelector.
Here is an example usage:
var df = document.createDocumentFragment();
var div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
var result = df.querySelector('#foo'); // result contains the div element
A good implementation should first use object detection to see if the browser supports this. For instance:
function getElementByIdInFragment(fragment, id) {
if (fragment.querySelector) {
return fragment.querySelector('#' + id);
} else {
// your custom implementation here
}
}

No. The DocumentFragment API is minimal to say the least: it defines no properties or methods, meaning that it only supports the properties and methods defined in the Node API. As methods such as getElementById are defined in the Document API, they cannot be used with a DocumentFragment.

NickFitz is right, DocumentFragment doesn't have the API you expect from Document or Element, in the standard or in browsers (which is a shame; it would be really handy to be able to set a fragment's innerHTML.
Even frameworks don't help you here, as they tend to require Nodes be in the document, or otherwise use methods on the context node that don't exist on fragments. You'd probably have to write your own, eg.:
function Node_getElementById(node, id) {
for (var i= 0; i<node.childNodes.length; i++) {
var child= node.childNodes[i];
if (child.nodeType!==1) // ELEMENT_NODE
continue;
if (child.id===id)
return child;
child= Node_getElementById(child, id);
if (child!==null)
return child;
}
return null;
}
It would almost certainly be better to keep track of references as you go along than to rely on a naïve, poorly-performing function like the above.
var frag= document.createDocumentFragment();
var mydiv= document.createElement("div");
mydiv.id= 'myId';
frag.appendChild(mydiv);
// keep reference to mydiv

What about:
var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
oFra.appendChild(myDiv);
oFra.getElementById("myId"); //not in FF
Unless you've added the the created div to your document fragment I'm not sure why getElementById would find it?
--edit
If you're willing to roll your own getElementById function then you ought to be able to get the reference you're after, because this code works:
var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myId";
oFra.appendChild(myDiv);
if (oFra.hasChildNodes()) {
var i=0;
var myEl;
var children = oFra.childNodes;
for (var i = 0; i < children.length; i++) {
if (children[i].id == "myId") {
myEl = children[i];
}
}
}
window.alert(myEl.id);

Using jQuery:
// Create DocumentFragment
var fragment = document.createDocumentFragment(),
container = document.createElement('div');
container.textContent = 'A div full of text!';
container.setAttribute('id', 'my-div-1');
container.setAttribute('class', 'a-div-class');
fragment.appendChild(container);
// Query container's class when given ID
var div = $('<div></div>').html(fragment);
console.log(div.find('#my-div-1').attr('class'));
jsFiddle: http://jsfiddle.net/CCkFs/
You have the overhead of creating the div with jQuery, though. A little hacky, but it works.

The best way by far to find out what you can and can't do with a DocumentFragment is to examine its prototype:
const newFrag = document.createDocumentFragment();
const protNewFrag = Object.getPrototypeOf( newFrag );
console.log( '£ protNewFrag:' );
console.log( protNewFrag );
I get
DocumentFragmentPrototype { getElementById: getElementById(),
querySelector: querySelector(), querySelectorAll: querySelectorAll(),
prepend: prepend(), append: append(), children: Getter,
firstElementChild: Getter, lastElementChild: Getter,
childElementCount: Getter, 1 more… }
... which tells me I can do things like:
const firstChild = newFrag.children[ 0 ];
PS this won't work:
const firstChild = Object.getPrototypeOf( newFrag ).children[ 0 ];
... you'll be told that "the object doesn't implement the DocumentFragment interface"

An external source, listed below, showed the following code snippet:
var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")
Which displays a different way of setting the object's ID parameter.
Javascript Kit - Document Object Methods

My DOM has a #document-fragment under the element tag.
This is what I am using (using jQuery) , Also I have a use case where I have the HTML DOM in a string -
var texttemplate = $(filecontents).find('template').html();
$(texttemplate).children()
<p>​Super produced One​</p>​,
<appler-one>​</appler-one>,
<p>​Super produced Two​</p>,
<appler-two>​…​</appler-two>]
$(texttemplate).html()
"<p>Super produced One</p>
<appler-one></appler-one>
<p>Super produced Two</p>
<appler-two>
<p>Super produced Three</p>
<appler-three></appler-three>
</appler-two>"
$(texttemplate).find("appler-one")
[<appler-one>​</appler-one>​]