I&#39;m refactoring some old JavaScript code and there&#39;s a lot of DOM manipulation going on.

    var d = document;
    var odv = d.createElement(&quot;div&quot;);
    odv.style.display = &quot;none&quot;;
    this.OuterDiv = odv;
	
    var t = d.createElement(&quot;table&quot;);
    t.cellSpacing = 0;
    t.className = &quot;text&quot;;
    odv.appendChild(t);

I would like to know if there is a better way to do this using jQuery. I&#39;ve been experimenting with:
    
    var odv = $.create(&quot;div&quot;);
    $.append(odv);
    // And many more

But I&#39;m not sure if this is any better.

jQuery document.createElement equivalent?

I have a canvas element defined statically in the html with a width and height. If I attempt to use JavaScript to resize it dynamically (setting a new width and height - either on the attributes of the canvas or via the style properties) I get the following error in Firefox:

&gt; uncaught exception: [Exception... &quot;Illegal operation on WrappedNative prototype object&quot;  nsresult: &quot;0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)&quot;  location: &quot;JS frame :: file:///home/russh/Desktop/test.html :: onclick :: line 1&quot;  data: no]

Is it possible to resize this element or do I have to destroy it and create a new element on the fly? 

How to resize html canvas element?

In answering another question I became aware that my Javascript/DOM knowledge had become a bit out of date in that I am still using `escape`/`unescape` to encode the contents of URL components whereas it appears I should now be using `encodeURIComponent`/`decodeURIComponent` instead.

What I want to know is what is wrong with `escape`/`unescape` ? There are some vague suggestions that there is some sort of problem around Unicode characters, but I can&#39;t find any definite explanation.

My web experience is fairly biased, almost all of it has been writing big Intranet apps tied to Internet Explorer. That has involved a lot of use of `escape`/`unescape` and the apps involved have fully supported Unicode for many years now.

So what are the Unicode problems that `escape`/`unescape` are supposed to have ? Does anyone have any test cases to demonstrate the problems ?

decodeURIComponent vs unescape, what is wrong with unescape?

In my code, I fairly frequently need to replace all children of a certain HTML container with a new list of children.

What is the fastest way to do this? My current approach is collecting all new elements into a DocumentFragment. The only way I&#39;ve found to then actually replace the children is to remove all the children one by one, and append the fragment. Is there no faster way?

Note: the solution needs not be cross-browser, but should preferably not require 3d-party components such as jQuery. The target-device is WebKit on a _very_ slow CPU so I need to keep full control of any reflows.

Replacing all children of an HTMLElement?

We&#39;ve all seen in-browser rich text editors, which allow you to edit colored/styled text in a WYSIWYG manner. But what about code editors, which automatically highlight code based on language rules as you type? Think Eclipse in a textarea (but without the refactoring support).

Do such things exist? I imagine scaling would be a problem - larger files would be difficult  to edit efficiently.

Is there a good in-browser code editor?

Suppose that I have a `&lt;div&gt;` that I wish to center in the browser&#39;s display (viewport). To do so, I need to calculate the width and height of the `&lt;div&gt;` element. 

What should I use? Please include information on browser compatibility.

How do I retrieve an HTML element&#39;s actual width and height?

So I have these checkboxes:

    &lt;input type=&quot;checkbox&quot; name=&quot;type&quot; value=&quot;4&quot; /&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;type&quot; value=&quot;3&quot; /&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;type&quot; value=&quot;1&quot; /&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;type&quot; value=&quot;5&quot; /&gt;

And so on. There are about 6 of them and are hand-coded (i.e not fetched from a db) so they are likely to remain the same for a while.

My question is how I can get them all in an array (in javascript), so I can use them while making an AJAX `$.post` request using Jquery.

Any thoughts?

Edit: I would only want the selected checkboxes to be added to the array

Getting all selected checkboxes in an array

Is there a way to capture when the contents of an iframe have fully loaded from the parent page?

Capture iframe load complete event

I am creating a photo gallery, and would like to be able to change the query string and title when the photos are browsed.

The behavior I am looking for is often seen with some implementations of continuous/infinite page, where while you scroll down the query string keeps incrementing the page number (http://x.com?page=4) etc.. This should be simple in theory, but I would like something that is safe across major browsers.

I found [this great post][1], and was trying to follow the example with `window.history.pushstate`, but that doesn&#39;t seem to be working for me. And I&#39;m not sure if it is ideal because I don&#39;t really care about modifying the browser history.

I just want to be able to offer the ability to bookmark the currently viewed photo, without reloading the page every time the photo is changed.

Here is an example of infinite page that modifies query string: http://tumbledry.org/

**UPDATE** found this method:

    window.location.href = window.location.href + &#39;#abc&#39;;

  [1]: https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

Modifying a query string without reloading the page

How can JavaScript change CSS `:hover` properties?

For example:

**HTML**

    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;Hover 1&lt;/td&gt;
        &lt;td&gt;Hover 2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

**CSS**

    table td:hover {
    background:#ff0000;
    }

How can the `td :hover` properties be modified to, say, `background:#00ff00`, with JavaScript? I know I could access the style background property using JavaScript with:

    document.getElementsByTagName(&quot;td&quot;).style.background=&quot;#00ff00&quot;;

But I don&#39;t know of a `.style` JavaScript equivalent for `:hover`.

Change :hover CSS properties with JavaScript

Suppose I have some jQuery code that attaches an event handler to all elements with class `.myclass`. 

**For example:**

    $(function(){
        $(&quot;.myclass&quot;).click( function() {
            // do something
        });
    });

And my HTML might be as follows:

    &lt;a class=&quot;myclass&quot; href=&quot;#&quot;&gt;test1&lt;/a&gt;
    &lt;a class=&quot;myclass&quot; href=&quot;#&quot;&gt;test2&lt;/a&gt;
    &lt;a class=&quot;myclass&quot; href=&quot;#&quot;&gt;test3&lt;/a&gt;

That works with no problem.
However, consider if the `.myclass` elements were written to the page at some future time.

**For example:**

    &lt;a id=&quot;anchor1&quot; href=&quot;#&quot;&gt;create link dynamically&lt;/a&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    $(function(){
        $(&quot;#anchor1&quot;).click( function() {
            $(&quot;#anchor1&quot;).append(&#39;&lt;a class=&quot;myclass&quot; href=&quot;#&quot;&gt;test4&lt;/a&gt;&#39;);
        });
    });
    &lt;/script&gt;

In this case, the `test4` link is created when a user clicks on `a#anchor1`.

The `test4` link does not have the `click()` handler associated with it, even though it has `class=&quot;myclass&quot;`.

Basically, I would like to write the `click()` handler once and have it apply to both content present at page load, and content brought in later via **AJAX / DHTML**. Any idea how I can fix this? 

How do I attach events to dynamic HTML elements with jQuery?

I&#39;ve inherited a project I&#39;m working on and I&#39;m updating some jquery animations (very little practice with jquery).

I have a div I need to add and remove the style attribute from. Here is the div:

    &lt;div id=&#39;voltaic_holder&#39;&gt;

At one point in the animation I need to add a style to it:

    &lt;div id=&#39;voltaic_holder&#39; style=&#39;position:absolute;top:-75px&#39;&gt;

I&#39;ve searched around and found the `.removeAttr()` method but I can&#39;t see how to add it, or even remote parts of it (like the top:-75px only).

Thanks,

Adding and removing style attribute from div with jquery

I want to create a simple bit of JS code that creates an image element in the background and doesn&#39;t display anything.  The image element will call a tracking URL (such as Omniture) and needs to be simple and robust and work in IE 6 =&lt; only.  Here is the code I have:

    var oImg = document.createElement(&quot;img&quot;);
    oImg.setAttribute(&#39;src&#39;, &#39;http://www.testtrackinglink.com&#39;);
    oImg.setAttribute(&#39;alt&#39;, &#39;na&#39;);
    oImg.setAttribute(&#39;height&#39;, &#39;1px&#39;);
    oImg.setAttribute(&#39;width&#39;, &#39;1px&#39;);
    document.body.appendChild(oImg);

Is this the simplest but most robust (error free) way to do it?

I cannot use a framework like jQuery.  It needs to be in plain JavaScript.

What is the best JavaScript code to create an img element

I&#39;m calling a web service that returns an array of objects in JSON.  I want to take those objects and populate a div with HTML.  Let&#39;s say each object contains a url and a name.

If I wanted to generate the following HTML for each object:
    
    &lt;div&gt;&lt;img src=&quot;the url&quot; /&gt;the name&lt;/div&gt;

Is there a best practice for this? I can see a few ways of doing it:

1. Concatenate strings
2. Create elements
3. Use a templating plugin
4. Generate the html on the server, then serve up via JSON.


Is there a best practice for generating html with javascript

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid a new preview dialog, so creating a new window with this content is not useful.

The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.

Print &lt;div id=&quot;printarea&quot;&gt;&lt;/div&gt; only?

Is there any way to change the value of a DOM textNode in web browser?

I specifically want to see if I can **change** the existing node, rather than **creating** a new one.

To clarify, I need to do this with Javascript. All text in the browser is stored in #textNodes which are children of other HTML nodes, but cannot have child nodes of their own.

As answered below, content can be changed by setting the **nodeValue** property of these Objects.

Change textNode value

Is there any way to get the collection of all `textNode` objects within a document? 

`getElementsByTagName()` works great for Elements, but `textNode`s are not Elements.

**Update:** I realize this can be accomplished by walking the DOM - as many below suggest. I know how to write a DOM-walker function that looks at every node in the document. I was hoping there was some browser-native way to do it. After all it&#39;s a little strange that I can get all the `&lt;input&gt;`s with a single built-in call, but not all `textNode`s.

getElementsByTagName() equivalent for textNodes

Say you have some code like this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
         &lt;div id=&quot;parentDiv&quot; onclick=&quot;alert(&#39;parentDiv&#39;);&quot;&gt;
             &lt;div id=&quot;childDiv&quot; onclick=&quot;alert(&#39;childDiv&#39;);&quot;&gt;
             &lt;/div&gt;   
          &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;


&lt;!-- end snippet --&gt;

    
I don&#39;t want to trigger the `parentDiv` click event when I click on the `childDiv`, How can I do this?

**Updated**

Also, what is the execution sequence of these two event?


Child element click event trigger the parent click event

I am writing a dhtml application that creates an interactive simulation of a system.  The data for the simulation is generated from another tool, and there is already a very large amount of legacy data.

Some steps in the simulation require that we play &quot;voice-over&quot; clips of audio. I&#39;ve been unable to find an easy way to accomplish this across multiple browsers. 

[Soundmanager2](http://www.schillmania.com/projects/soundmanager2/) comes pretty close to what I need, but it will only play mp3 files, and the legacy data may contain some .wav files as well.  

Does anyone have any other libraries that might help?

Cross-platform, cross-browser way to play sound from Javascript?

In IE, I can just call `element.click()` from JavaScript - how do I accomplish the same task in Firefox?  Ideally I&#39;d like to have some JavaScript that would work equally well cross-browser, but if necessary I&#39;ll have different per-browser JavaScript for this.

How do I programmatically click on an element in JavaScript?

How can I alert the id of the `&lt;li&gt;` item clicked? 

    &lt;ul id=&#39;myid&#39;&gt;
      &lt;li id=&#39;1&#39;&gt;First&lt;/li&gt;
      &lt;li id=&#39;2&#39;&gt;Second&lt;/li&gt;
      &lt;li id=&#39;3&#39;&gt;Third&lt;/li&gt;
      &lt;li id=&#39;4&#39;&gt;Fourth&lt;/li&gt;
      &lt;li id=&#39;5&#39;&gt;Fifth&lt;/li&gt;
    &lt;/ul&gt;

(Anything that can replace the id may be value or something else will also work.)

jQuery get the id/value of &lt;li&gt; element after click function

In a webpage I am calling a WebService that gives me an integer value.  I need to display this value in a block of text.  I am currently using an HTML `&lt;span&gt;`.

So far, I&#39;ve found two methods of putting my value in a span.  `innerText()` is an IE proprietary way of doing it and `innerHTML()` is a non-standards compliant way, although widely supported.

What is the correct standards compliant way of setting the text between `&lt;span&gt;` and `&lt;/span&gt;` from Javascript?


Set content of HTML &lt;span&gt; with Javascript

Is it possible to import css stylesheets into a html page using Javascript? If so, how can it be done?

P.S the javascript will be hosted on my site, but I want users to be able to put in the `&lt;head&gt;` tag of their website, and it should be able to import a css file hosted on my server into the current web page. (both the css file and the javascript file will be hosted on my server).

How to load up CSS files using Javascript?

What JavaScript do I need to use to redirect a parent window from an iframe?

I want them to click a hyperlink which, using JavaScript or any other method, would redirect the parent window to a new URL.

Redirect parent window from an iframe action

jQuery: how to change tag name?

For example:

    &lt;tr&gt;
        $1
    &lt;/tr&gt;

I need

    &lt;div&gt;
        $1
    &lt;/div&gt;

Yes, I can

 1. Create DOM element &amp;lt;div&gt;
 2. Copy tr content to div
 3. Remove tr from dom

But can I make it directly?

PS:

        $(tr).get(0).tagName = &quot;div&quot;; 

results in `DOMException`.


All Dhtml Solutions on Gang of Coders

Total of 25 Dhtml Solutions