hsriat  1,654
Recognized Expert Top Contributor
I have to make a dynamic page which contains only div elements.
Now in each div, I have to add inputs, textareas, a etc.
Two options I have...
First: - var inp = document.createElement('input');
-
inp.className = 'abc';
-
inp.type = 'text';
-
inp.value .......
-
.....
-
....
-
document.getElementById('divId').appendChild(inp);
Second: - document.getElementById('divId').innerHTML = '<input type="text" class="abc" value=................... >';
Since I have to call this same function many times, which will give better results as far as performance is concerned?
3 3870 
Whichever you use, the real time gets taken up with rendering the page, especially with rendering the page several times. Try to build the new content off-stage and display it all at once.
hsriat 1,654
Recognized Expert Top Contributor
Definitely innerHTML - see innerHTML vs. DOM.
That was a wonderful page!!!
I compared the tests in all the four browsers.
Opera is the fastest, taking 80ms for the DOM thing.
Then came safari with 100 ms.
My favorite Firefox could not catch them and was at 210ms..
And poor dude IE6 took more than 1 second!!
Thanks alot... :)
PS: I think Firefox took so much time as there were plenty of other tabs too, and all the other browsers just had one tab.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Nicolas Van Lancker |
last post by:
Hi folks;
I have this webpage, allowing users to insert multiple records in one post
into the database.
Because I don't know the exact number of records they want to add, I created
a little javascript
that adds a new line with HTML inputboxes and lists to the form if they
press a button.
|
by: necromonger |
last post by:
Hi,
I've got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn't support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement('tr');
stbl.appendChild(newr);
|
by: jhcorey |
last post by:
I am doing some maintenance on a js tree control that was done with
proprietary IE code.
When I click on a node it calls a function which has code similar to
that below to expand the tree. "el" refers to the div that I clicked
on.
var workHtml = el.innerHTML;
for (i = 0; i < idx; i++)
|
by: RobG |
last post by:
I know you aren't supposed to use innerHTML to mess with table
structure, but it seems you can't use it just after a table without
damaging the containing element.
I added a table to a div using createElement methods, then added a bit
of extra text using innerHTML, only to find most of the attributes
removed from the table.
Below is a script that calls the same code to add a table inside a
div. It adds an onclick to the div and...
|
by: Jake Barnes |
last post by:
This weekend I wanted to learn AJAX, so I set up a little toy page
where I could experiment. The idea of this page is that you click in
one of the boxes to get some controls, at which point you can add text,
images, or HTML to the box. This seems to work fine in FireFox, but not
in IE. You can see the problem here:
http://www.publicdomainsoftware.org/ajaxExperiment.htm
In FireFox, if you click in a box and then select "Add HTML" you...
| | |
by: sonic |
last post by:
Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I am a total newbie
but the answer was not immediately obvious to me here.
so.. problem:
declaring doctype as xhtml will prevent myDiv.innerHtml=val from
working.
suggested solution:
|
by: SkyZhao |
last post by:
if i use AttachEvent like this,it can't work;
eg:
var img = document.createElement("img");
img.attachEvent("onclick",alert("test"));
var div = document.createElement("div");
div.appendChild(img); //can't work;
div.innerHTML="<-click this";
|
by: Dan Andrews |
last post by:
Hello,
I was wondering what is the correct way to handle special characters
via javascript and the DOM. I would like to avoid document.write and
innerHTML. What I am doing is dynamically creating options for a
select. The innerHTML example below works for firefox and internet
explorer, but is this the accepted way of dynamically adding special
characters.
option = document.createElement("OPTION");
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
