How to access Element created by javascript document.createElement function - javascript

I'm creating a div at run-time using java-script document.createElement function.And now i need to execute another function on scrolling of dynamic created div.And also need to catch key-down event of div.
Can any one tell me how can i achieve this.

You need to insert the dynamically created div into the DOM. Without doing that, you cannot retrieve it by using document.getElementById. You can insert your dynamically created div into the element by calling a function like appendChild or insertBefore, described here http://www.w3schools.com/jsref/dom_obj_all.asp
After you find an appropriate place to insert your div into the DOM, you should be able to retrieve it from anywhere by calling document.getElementById("myDivId");. You'll also need to give that created div an id after creation, if you haven't already done so. The entire thing would look something like:
var myDiv = document.createElement("div");
myDiv.id = "myDivID"; //Give it some ID
var divsParent = document.getElementById("dynamicDivsParentElementID"); //get the element where you want to insert the div into
divsParent.appendChild(myDiv);
var retrievedDynamicDiv = document.getElementById('myDivID');
Check it out working on jsFiddle: http://jsfiddle.net/qnPUF/

You can do this by calling the scrolling function after the div element is created. Make sure the function is called after the createElement

Related

how to make a custom html element execute after being appended to element

To preface, say that we have a custom element that looks just like the one from this Autonomous custom element section from here: example code
and after the page loads you wish to create a new custom element by doing something like this:
var exampleElement = document.createElement("popup-info"); //creates element
var exampleElementImg = document.createAttribute("img"); //does not get executed until the parser has put other dom in from the custom element
exampleElementImg.value = "img/alt.png";
exampleElement.setAttributeNode(exampleElementImg);
var exampleElementText = document.createAttribute("text");
exampleElementText.value = "Hello World!";
exampleElement.setAttributeNode(exampleElementText);
//append exampleElement somewhere to the document
normally this would be fine but immediately when createElement() gets executed it starts appending the extra DOM immediately, but it does not wait for createAttribute()
I was wondering if there would be a way to get this to create the attributes before the element get parsed without using something like timeout in the constructor.
Since that is a class you can create a separate function within that class like ‘create’ and within that function is where you have all of the appending functions that append the objects to the shadow dom and wrapper.
Then call it like below after you have added the attributes and so on.
‘exampleElement.create();’

How do I insert a div into another div with plain Javascript(no JQuery or other library)?

How do I insert an HTML div into another div using plain JavaScript? I have found examples of how to do this with jQuery, but I have not found out how to do it with plain JavaScript. The platform I am developing for is limited to plain JavaScript.
I would like to create a grid that has a column and row count that depends on an XML file. I wanted to create a div for each category, and for each piece of content in that category I wanted to add a div. I have been able to create a single div using the following:
document.createElement("img");
Thank you for your help.
If you want it to be added at the bottom of an existing element, you want to use appendChild().
Start by setting the new element to a temporary variable:
var newDiv = document.createElement("div");
Then make any updates to the new element (e.g., add a class, set the id attribute, etc.) and append it to your target element:
document.getElementById.("TARGET_ID").appendChild(newDiv);
If there is other content in the target div already, and you want to place the new element in a specific location other than the end, you can identify the appropriate child element of the target div and use insertBefore() instead.
Lots of information on this can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Simple createElement issue in Javascript

I thought the following script will create div element but I got nothing output in my html. Could anyone help me out? Thanks a lot.
var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';​
You get nothing in your HTML, because your HTML is on the server.
You get nothing in the DOM, because you haven't added the element to the DOM.
document.body.appendChild(div);
You have to use the appendChild method in the end:
var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';​
document.body.appendChild(div);
Otherwise, the created element will exist, but won't appear in your page.
Also, you have to be sure that document.body exists, otherwise, it will throw an error (if this script is going to be executed when loaded, put it inside an onload event).
PS: You can also append to any other DOM elements:
document.getElementById('myDivHolder').appendChild(div);
JSFiddle example: http://jsfiddle.net/AkXTr/
In addition to creating the element, you must insert it into the DOM. You can use the appendChild() method to add it to the end of a given parent element:
var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';
// Now, append it
document.getElementById('someOtherElement').appendChild(div);
You'll actually need to append it to something; I'm guessing document.body will do.
var div = document.createElement('div');
div.id = 'testttttttt';
div.innerHTML = 'fjsoidfjiosdjfoi';​
document.body.appendChild(div);
Make sure you do this when document.body actually exists, though, i.e. in a load event or inside the body element itself.
You created the div correctly, just it hangs in nowhere. It needs to be inserted into the document, e.g. like
var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';
document.getElementsByTagName("body")[0].appendChild(div);

How to insert created object into a div

I created an iframe using jQuery that I want to insert into an existing div element. However, when I use innerHTML to insert it, it shows up as: "[object HTMLIFrameElement]"
What could be the reason for this?
Here is the example: http://jsfiddle.net/MarkKramer/PYX5s/2/
You want to use the appendChild method rather than innerHTML. Change the last line in the JSFiddle from
iframediv.innerHTML = iframe;
to
iframediv.appendChild(iframe);
Edit to actually answer your question:
Your variable iframe is a reference to a DOM element. It's object representation is an <iframe> element while its textual representation is simply [object HTMLIFrameElement].
By using innerHTML you are attempting to insert its textual representation into the DOM. This is just how the method works. You may come across JS code where elements are added to the DOM via innerHTML, but it's always with text, e.g.
element.innerHTML = '<div>some text</div>';
In this case the browser will correctly add a <div> node as a child of element.
For your <iframe> element to be inserted into the DOM using the variable iframe, you must use the appendChild method which will add the IFrame object as a child node to iframediv.
$('#iframecontainer').append(iframe);
instead of
var iframediv = document.getElementById('iframecontainer');
iframediv.innerHTML = iframe;
should fix the problem
var new_iframe = $("<iframe></iframe>");
new_iframe.appendTo($("#div_to_insert_into"));
The idea behind (most) of the posted solutions is that you can work with your iframe and it's container as jQuery objects instead of regular dom elements. A jQuery object is a reference to a div or an iframe that has access to all of jQuery's awesome methods... like .append() and .click().
Generally speaking, jQuery's real purpose is to turn lines of code like
var iframediv = document.getElementById('iframecontainer');
...into ...
var iframediv = $("#iframecontainer");
...which you can then use to do with whatever you please, like
iframediv.appendTo("#anotherDiv");
Good luck.

JQuery DOM creation/handling issue

So, say I have selected, in JQuery, a singular DOM div.
I then proceed to create a new DIV like so:
var DIV = $("<div>Hello, world</div>");
After that, I attempt to place that DIV inside the original one like so:
$(OriginalDiv).append(DIV);
Okay, that works.
Now I want to edit DIV further.
Calls to .click, .html, .addClass, (And likely more) do not work!
Okay, instead I do:
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(OriginalDiv).append(DIV);
That appears to work at first; However, instead, it sets DIV to reference the same DOM object as OriginalDiv and NOT the newly appended DOM object. Naturally, this does not allow me to edit DIV.
So, then, I try two more methods:
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);
and
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(DIV).appendTo(OriginalDiv);
Not even these work.
If I haven't done a very good job explaining, here is my exact dilemma
I am trying to create a DOM object in jquery, then append it to another DOM object using jquery. The problem is, once it gets appended, there seems to be no way for me to directly access it without using somethign like .children.
I'd like very much to be directly returned somewhere along in that process a reference to the DOM object which I am appending. As in the one that actually gets appended.
I'm not sure how to do this in JQuery. Anybody know a solution?
Thanks
--G
Yes, append won't work as it returns a reference to the element the new element was appended to. jQuery supports method chaining, so this should work easily:
$("<div>Hello, world</div>")
.click(function() {
// something
})
.appendTo('someSelector');
But even
var $ele = $("<div>Hello, world</div>").appendTo('someSelector');
will work. appendTo returns a reference to the element which was appended. If this does not work for you, you have your problem elsewhere.
Comments on your code: This is not your problem, however it is important for you to know what is going on here.
This part
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);
is the same as
$($("<div>Hello, world</div>")).appendTo($("someSelector"));
You see, you have a nested call to jQuery, because DIV is already a jQuery object. There is no need to pass it again to jQuery.
You can also pass a selector directly to appendTo.
you could try this;
var DIV = document.createElement('div');
then you can use;
$(div).html('Test!');
or what ever you want to use with.
You don't have to get anything back from the DOM. Once you create the element with jQuery, you already have a reference to the DOM element. Inserting it into the document does not do anything special.
// this will create the DOM element, and the jQuery
// object wrapping that newly created DOM object
// is assigned to DIV.
var DIV = $("<div>Hello, world</div>");
// Don't worry about getting a return value from this
// append() call. What we need is already available inside
// the variable DIV.
$(OriginalDiv).append(DIV);
// continue using DIV as you normally would. It is referring
// to the same DOM object that was just appended to the document.
DIV.addClass('green');

Categories

Resources