dom-manipulation

I have a div that is filled by JS created DOM elements, I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea, What is a valid alternative to doing this to clear the div's contents? If you have jQuery then: $('#elName').empty(); Otherwise: var node = document.getElementById('elName'); while (node.hasChildNodes()) { node.removeChild(node.firstChild); } The Prototype way is Element.update() e.g.: $('my_container').update() If you're using jQuery have a look at the .empty() method http:/

Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this eventually, but I want that process to be easier. My ideal solution would be some way of breaking javascript execution as soon as a DOM element is modified. I am aware of Chrome's dev tools ability to right click an element and select Break On > Attribute Modifications. However, this is happening sometime during page load, so it'd be really nice if

I have this HTML: <ul> <div> <li>a</li> <li>b</li> <li class="break">c</li> <li>d</li> <li>f</li> </div> </ul> What I want is where class="break" I want the parent div closed and a new one opened so I end up with this: <ul> <div> <li>a</li> <li>b</li> </div> <div> <li>c</li> <li>d</li> <li>f</li> </div> </ul> Now I've tried this: $(".break").before("</div><div>"); but jQuery doesn't act as I'd expect and instead rewrites what I have entered and puts an empty div instead. Like so: <ul> <div> <li>a</li> <li>b</li> <div></div> <li class="break">c</li> <li>d</li> <li>f</li> </div> </ul> So how can

I would like to remove the parent without removing the child - is this possible? HTML structure: <div class="wrapper"> <img src""> </div> <div class="button">Remove wrapper</div> After clicking on the button I would like to have: <img src""> <div class="button">Remove wrapper</div> Could use this API: http://api.jquery.com/unwrap/ Demo http://jsfiddle.net/7GrbM/ .unwrap Code will look something on these lines: Sample Code $('.button').click(function(){ $('.wrapper img').unwrap(); }); Pure JS solution that doesn't use innerHTML: function unwrap(wrapper) { // place childNodes in document

I've got some html that looks like this: <div> <span class="red">red text</span> some more text <span class="blue">blue text</span> </div> What I want to do is use jQuery to remove all the spans within the div regardless of attached class, but leave the text within the span tags behind. So the final result will be: <div> red text some more text blue text </div> I've tried to use the unwrap() method but it unwraps the div. I've also tried to remove the elements but that removes the elements and their text. jQuery 1.4+ You don't want to unwrap the span, you want to unwrap its contents: $("span")

I need to unit test some DOM manipulation functions with jasmine (currently I run my tests in the browser and with Karma) I was wondering what the best approach would be to do this ? For example, I can mock and stub the window and document objects and spyOn a couple of their functions. But this doesn't really look like an easy solution, so thats why I'm asking this question! Or is there a better way (not using jasmine maybe) to do this ? Thanks a lot I've been using a helpful addition to jasmine called jasmine-jquery available on github. It gives you access to a number of useful extra matcher

What's the difference between empty() and remove() methods in jQuery , and when we call any of these methods, the objects being created will be destroyed and memory released? nickf empty() will remove all the contents of the selection. remove() will remove the selection and its contents. Consider: <div> <p><strong>foo</strong></p> </div> $('p').empty(); // --> "<div><p></p></div>" // whereas, $('p').remove(); // --> "<div></div>" Both of them remove the DOM objects and should release the memory they take up, yes. The documentation explains it very well. It also contains examples: .remove()