I've got a bit of javascript that dynamically adds elements to my page. The problem is that there are hundreds of elements to create on any given run, and although it takes less than a second to load a single element, the whole page may take 30 seconds or more to load completely, then everything suddenly springs up onto the page. My question is: how can I update the page so that my dynamically created element will be displayed as soon as it is created?
var newDiv = document.createElement('div');
for (var val in array) {
var newCanvas = document.createElement('div');
newCanvas.className = "graph";
newDiv.appendChild(newCanvas);
drawGraph(val, newCanvas); //adds a bunch of elements to newCanvas
addTitle(val, newCanvas); //adds another
addDescription(val, newCanvas); //adds another
}
document.body.appendChild(newDiv);
It is extremely inefficient to dynamically add hundreds of elements to the DOM one at a time. Every time you add a single visible element to the DOM you force a reflow of the entire DOM tree which is followed by a repaint to the screen.
You should use JavaScript to create a DOM fragment (e.g. a div element) to which you can append new DOM elements. Once you have all of the new elements you can wholesale add them all by transferring the children of that fragment to the containing DOM element in the live DOM tree.
The following is an example of a function that creates a DOM element with a set of specified attributes and optional child elements. After an element and its children are assigned to the variable myDiv that element is appended to the document's body.
function dom(tag, attributes) {
var el, key, children, child;
el = document.createElement(tag);
for (key in attributes) {
if (attributes.hasOwnProperty(key)) {
el[key] = attributes[key];
}
}
for (i = 2, l = arguments.length; i < l; i++) {
child = arguments[i];
if (child.nodeType == 1 || child.nodeType == 3) {
el.appendChild(child);
}
}
return el;
}
var myDiv = dom(
'div',
{ id: 'myDiv', className: 'container' },
dom(
'p',
{ className: 'firstParagraph' },
document.createTextNode('If you enjoy this movie, '),
dom(
'a',
{ href: 'http://www.amazon.com', title: 'Buy this movie at Amazon.com!' },
document.createTextNode('buy it at Amazon.com')
),
document.createTextNode('!')
),
dom(
'p',
{},
document.createTextNode('The quick brown fox jumps over the lazy dog.')
)
);
document.body.appendChild(myDiv);
Put all the element loading after the DOM is constructed.
i.e use
$(document).ready(function(){
// induvidual elements loadings
});
The $ sign denotes Jquery. For using jquery, add the script block.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
This way the basic structure will load completely and individual parts may take its own time.
Related
I'm trying to load scripts and styles on user interaction.
I'm also trying to create iframes when they are in viewport (not the same as lazy load).
My idea is to have a <custom> name tag and turn it into a <style>, <script> or <iframe>.
I have found a snippet that does that for one element.
How do I apply it to all elements that have the same tag?
<custom id="js-1" src="/assets/js_min_1.js">Custom</custom>
<custom id="js-2" src="/assets/js_min_2.js">Custom</custom>
<custom id="js-4" src="/assets/js_min_3.js">Custom</custom>
// CHANGE THE TAG OF AN ELEMENT
let wns = document.querySelector('custom');
let lmn = document.createElement("iframe");
let index;
// Copy the children
while (wns.firstChild) {
lmn.appendChild(wns.firstChild); // *Moves* the child
}
// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}
// Replace it
wns.parentNode.replaceChild(lmn, wns);
This code only affects the first element, as expected.
I want to know if we can change tag name in a tag rather than its content. i have this content
< wns id="93" onclick="wish(id)">...< /wns>
in wish function i want to change it to
< lmn id="93" onclick="wish(id)">...< /lmn>
i tried this way
document.getElementById("99").innerHTML =document.getElementById("99").replace(/wns/g,"lmn")
but it doesnot work.
plz note that i just want to alter that specific tag with specific id rather than every wns tag..
Thank you.
You can't change the tag name of an existing DOM element; instead, you have to create a replacement and then insert it where the element was.
The basics of this are to move the child nodes into the replacement and similarly to copy the attributes. So for instance:
var wns = document.getElementById("93");
var lmn = document.createElement("lmn");
var index;
// Copy the children
while (wns.firstChild) {
lmn.appendChild(wns.firstChild); // *Moves* the child
}
// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}
// Replace it
wns.parentNode.replaceChild(lmn, wns);
Live Example: (I used div and p rather than wns and lmn, and styled them via a stylesheet with borders so you can see the change)
document.getElementById("theSpan").addEventListener("click", function() {
alert("Span clicked");
}, false);
document.getElementById("theButton").addEventListener("click", function() {
var wns = document.getElementById("target");
var lmn = document.createElement("p");
var index;
// Copy the children
while (wns.firstChild) {
lmn.appendChild(wns.firstChild); // *Moves* the child
}
// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}
// Insert it
wns.parentNode.replaceChild(lmn, wns);
}, false);
div {
border: 1px solid green;
}
p {
border: 1px solid blue;
}
<div id="target" foo="bar" onclick="alert('hi there')">
Content before
<span id="theSpan">span in the middle</span>
Content after
</div>
<input type="button" id="theButton" value="Click Me">
See this gist for a reusable function.
Side note: I would avoid using id values that are all digits. Although they're valid in HTML (as of HTML5), they're invalid in CSS and thus you can't style those elements, or use libraries like jQuery that use CSS selectors to interact with them.
var element = document.getElementById("93");
element.outerHTML = element.outerHTML.replace(/wns/g,"lmn");
FIDDLE
There are several problems with your code:
HTML element IDs must start with an alphabetic character.
document.getElementById("99").replace(/wns/g,"lmn") is effectively running a replace command on an element. Replace is a string method so this causes an error.
You're trying to assign this result to document.getElementById("99").innerHTML, which is the HTML inside the element (the tags, attributes and all are part of the outerHTML).
You can't change an element's tagname dynamically, since it fundamentally changes it's nature. Imagine changing a textarea to a select… There are so many attributes that are exclusive to one, illegal in the other: the system cannot work!
What you can do though, is create a new element, and give it all the properties of the old element, then replace it:
<wns id="e93" onclick="wish(id)">
...
</wns>
Using the following script:
// Grab the original element
var original = document.getElementById('e93');
// Create a replacement tag of the desired type
var replacement = document.createElement('lmn');
// Grab all of the original's attributes, and pass them to the replacement
for(var i = 0, l = original.attributes.length; i < l; ++i){
var nodeName = original.attributes.item(i).nodeName;
var nodeValue = original.attributes.item(i).nodeValue;
replacement.setAttribute(nodeName, nodeValue);
}
// Persist contents
replacement.innerHTML = original.innerHTML;
// Switch!
original.parentNode.replaceChild(replacement, original);
Demo here: http://jsfiddle.net/barney/kDjuf/
You can replace the whole tag using jQuery
var element = $('#99');
element.replaceWith($(`<lmn id="${element.attr('id')}">${element.html()}</lmn>`));
[...document.querySelectorAll('.example')].forEach(div => {
div.outerHTML =
div.outerHTML
.replace(/<div/g, '<span')
.replace(/<\/div>/g, '</span>')
})
<div class="example">Hello,</div>
<div class="example">world!</div>
You can achieve this by using JavaScript or jQuery.
We can delete the DOM Element(tag in this case) and recreate using .html or .append menthods in jQuery.
$("#div-name").html("<mytag>Content here</mytag>");
OR
$("<mytag>Content here</mytag>").appendTo("#div-name");
I have a function that is successful in removing an element and appending it elsewhere on the page as successful. The problem is that as soon as the document is ready jQuery adds classes and attributes to the children that upon moving are lost. I need these classes and attributes to remain after removing and appending. I have thought about calling the original function that adds the classes, but the problem is they are key based and rely on their position prior to the move, calling it after changes the key and thus will add brand new and different classes.
The classes adding jQuery is pretty standard:
$(function(){
$("div").each(function(key){
if ($(this).hasClass("container")){
$(this).find("ul").addClass("parent" + key);
$(this).find(".container-item").attr("parentClass", ".parent" + key);
};
});
});
The remove/append function:
function copy_item(draggable, target){
var account = clone_items(draggable);
//$('#'+name.uid).remove();
$('#'+name.uid).hide();
target.append(make_div(name, true, true));
//$(draggable).children().attr("class", ($(draggable).children().attr("class")));
}
function make_div(name, drag, drop){
var newdiv = document.createElement('div');
newdiv.setAttribute('id', name.uid);
newdiv.appendChild(make_h3(name.username));
ul = document.createElement('ul');
ul.setAttribute("class", "domain_list");
newdiv.appendChild(ul);
for (j = 0; j < name.domains.length; ++j) {
ul.appendChild(make_li(name.domains[j], drag));
}
return newdiv;
}
The end result in the HTMl is basically:
<div class="container">
<ul class="parent0">
<li parentClass="parent0">
<li parentClass="parent0">
When recreating this structure, I need to have the class "parent0" and the parentClass attribute intact. Above you can see I've tried hiding the element, ensuring that it still stays a valid element with the correct classes/attributes, but in the end that still didn't work out. Ideally, I could remove the element entirely and recreate it with the correct classes.
If I am correct in my understanding of what you are trying to do, you do not need to .remove() and recreate the element in order to move it. You can just do this:
function copy_item(draggable, target) {
// not sure what this variable is for
// as you don't seem to be using it?
var account = clone_items(draggable);
// ...however, appending an existing
// element to another will 'move' it
// and preserve all of it's properties
target.append($('#' + name.uid));
}
I wanted to remove all text from html and print only tags. I Ended up writing this:
var html = $('html');
var elements = html.find('*');
elements.text('');
alert(html.html());
It only out prints <head></head><body></body>. Was not that suppose to print all tags. I've nearly 2000 tags in the html.
var elements = html.find('*');
elements.text('');
That says "find all elements below html, then empty them". That includes body and head. When they are emptied, there are no other elements on the page, so they are the only ones that appear in html's content.
If you really wnat to remove all text from the page and leave the elements, you'll have to do it with DOM methods:
html.find('*').each(function() { // loop over all elements
$(this).contents().each(function() { // loop through each element's child nodes
if (this.nodeType === 3) { // if the node is a text node
this.parentNode.removeChild(this); // remove it from the document
}
});
})
You just deleted everything from your dom:
$('html').find('*').text('');
This will set the text of all nodes inside the <html> to the empty string, deleting descendant elements - the only two nodes that are left are the two children of the root node, <head></head> and <body></body> with their empty text node children - exactly the result you got.
If you want to remove all text nodes, you should use this:
var html = document.documentElement;
(function recurse(el) {
for (var i=0; i<el.childNodes.length; i++) {
var child = el.childNodes[i];
if (child.nodeType == 3)
el.removeChild(child);
else
recurse(child);
}
})(html);
alert(html.outerHTML);
Try this instead
$(function(){
var elements = $(document).find("*");
elements.each(function(index, data){
console.log(data);
});
});
This will return all the html elements of page.
lonesomeday seems to have the right path, but you could also do some string rebuilding like this:
var htmlString=$('html').html();
var emptyHtmlString="";
var isTag=false;
for (i=0;i<htmlString.length;i++)
{
if(htmlString[i]=='<')
isTag=true;
if(isTag)
{
emptyHtmlString+=htmlString[i];
}
if(htmlString[i]=='>')
isTag=false;
}
alert(emptyHtmlString);
I have a UL on a page and on the click of a button I am appending an li and fading it in. This works fine for single clicks. However, when the button is clicked twice, the first animation immediately stops and the second completes.
I have setup a test page to demonstrate this: http://anttears.co.uk/test (the test page has been tested in FF only)
Putting a console.log in the setOpacity function for the value of elem seems to show the javascript working as expected - both li's reaching opacity=1. However, the first li seems to be a fragment dissasoiated with the actual DOM.
I am deliberately trying to get this working without the usual libraries, as a learning experience.
Any help greatfully appreciated...
Ant
this.prepend = function(string, elem) {
var content = elem.innerHTML;
content = string + content;
elem.innerHTML = content;
}
Never do this.
You're taking the DOM content of the elem (the growlList), serialising it to a new HTML string, prepending some HTML content, and parsing the joined HTML back into completely new DOM nodes. This loses all non-HTML-serialisable content, such as form field values, event handlers and JavaScript references. The animation still has a reference to the old HTMLElement node, which is no longer in the DOM, having been replaced by newly-parsed-from-content elements.
Indeed, you usually want to avoid generating HTML strings at all:
growl = '<li id="' + gid + '" class="' + className + ' growl" style="display: none"><span class="close" title="close">x</span><h2>' + heading + '</h2><div class="growlContent">' + content + '</div></li>',
Any unescaped HTML-special characters in that content and you've broken your markup at best. At worst, the data comes from a malicious user and you've given yourself an XSS security hole.
Instead, use DOM-style methods, eg:
var span= document.createElement('span');
span.className=span.title= 'close';
span.appendChild(document.createTextNode('x'));
var h2= document.createElement('h2');
h2.appendChild(document.createTextNode(heading));
var div= document.createElement('div');
div.className= 'growlContent';
div.appendChild(document.createTextNode(content))
var li= document.createElement('li');
li.id= gid;
li.className= className;
li.appendChild(span);
li.appendChild(h2);
li.appendChild(div);
gl.insertBefore(li, gl.firstChild);
This is quite wordy, but it's easy to write a helper function to cut down on typing, eg:
gl.insertBefore(el('li', {id: gid, className: className), [
el('span', {className: 'close', title: 'close'}, 'x'),
el('h2', {}, heading),
el('div', {className: 'growlContent'}, content)
]), gl.firstChild);
// Element creation convenience function
//
function el(tag, attrs, content) {
var el= document.createElement(tag);
if (attrs!==undefined)
for (var k in attrs)
if (attrs.hasOwnProperty(k))
el[k]= attrs[k];
if (content!==undefined) {
if (typeof(content)==='string')
el.appendChild(document.createTextNode(content));
else
for (var i= 0; i<content.length; i++)
el.appendChild(content[i]);
}
return el;
};