StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>IE6/7 has a lot of <a href="http://google.com/search?q=createelement+ie" rel="nofollow noreferrer">problems/bugs/misbehaviours</a> with regard to creating and adding elements in the DOM using <code>createElement</code>. I strongly recommend to switch to <a href="http://jquery.com" rel="nofollow noreferrer">jQuery</a> for this since it does all the work in a cross browser compatible manner and has already taken (almost) all the IE6/7 specific misbehaviours into account so that you don't need to end up with a doubled amount of code to get it to work in all browsers the world is aware of. Here's a copy'n'paste'n'runnable <a href="http://sscce.org" rel="nofollow noreferrer">SSCCE</a>:</p> <pre><code><!doctype html> <html lang="en"> <head> <title>Test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $('#add').click(function() { var newElement = $('<div class="filter"><a href="#" class="delete">delete</a></div>'); $('#container').append(newElement); }); }); </script> <style> .filter { background: pink; } .delete { background: yellow; } </style> </head> <body> <div id="container"></div> <button id="add">add</button> </body> </html> </code></pre> <p><strong>Update</strong>: as per the comments, jQuery is absolutely not an option. Well, best what you can try is to set element attributes only <em>after</em> the element is been added to the DOM. Also try not to clone nodes in IE6/7, this is often epic fail. Rather create a brand new node from beginning on.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload