dom-manipulation | 易学教程

querySelectorAll: manipulating nodes

阅读更多关于 querySelectorAll: manipulating nodes

As far as I have understood, querySelector returns a real changeable element while querySelectorAll returns a non-live Static Node Set. I want to adjust the style of all elements fitting to a specific selector. It works fine for the first element with querySelector , but not for all matching elements with querySelectorAll . I guess that's because the node set is non-live. Is there a workaround? Or am I missing something? The problem is that querySelector returns a single node. querySelectorAll returns a set of nodes (the live-ness means the elements in the set won't be removed if you update

jQuery how to remove all <span> tags from a <div>?

阅读更多关于 jQuery how to remove all tags from a ?

I've tried both of the following but none of them worked: $('#divhtml').remove('span') $('#divhtml').find('span').remove() EDIT: $('#divhtml').find('span').remove() worked on 2nd try. You have already used a correct statement: $('#divhtml').find('span').remove() This should work. Please provide more context... See this jsfiddle as "proof" that something else is wrong: http://jsfiddle.net/Pbgqy/ Try this: $("#divhtml span").remove() 来源： https://stackoverflow.com/questions/8931955/jquery-how-to-remove-all-span-tags-from-a-div

Is there a JQuery DOM manipulator/CSS selector equivalent class in PHP?

阅读更多关于 Is there a JQuery DOM manipulator/CSS selector equivalent class in PHP?

I know that I can use DOMDocument and DOMXPath to manipulate XML files. But, I really love JQuery, and it would be great if there was something more like JQuery in the PHP world that I could use for sever side DOM manipulation. NOTE: I'm only interested here in how JQuery Selects and Manipulates the DOM, not all the other parts of JQuery (I guess you can say just the Pop and the Sizzle parts). Update: It looks like there is an equivalent for the selector functions, but as far as the manipulation functions I guess I have to stick with DOMDocument. Well, excluding all the JavaScript specific

Create a label using jQuery on the fly

阅读更多关于 Create a label using jQuery on the fly

问题 I need to create a label and text field on the fly and also include datepicker for the textfield. I need something like this: <label for="from">From </label> <input type="text" id="from" name="from" /> I have tried something like this in jQuery: var label = $("<label>").attr('for', "from"); label.html('Date: ' + '<input type="text" id="from name="from" value="">'); $(function() { $("#from").datepicker(); }); This one somehow doesn't create the label and also the text field. I am not sure what

Is there anyway of getting javascript code injected in an iframe to execute without removing and reappending the script tag containing it?

阅读更多关于 Is there anyway of getting javascript code injected in an iframe to execute without removing and reappending the script tag containing it?

Context: I am building a live HTML,CSS & Javascript editor. It can be accessed here . The source can be accessed here . Question: Is it possible to run javascript code injected into an iframe without repeated removal and addition of <script> tag containing the code from and to the DOM tree? Since DOM manipulation is a costly affair, I want to try and eliminate multiple DOM manipulations. Instead I want to be able to just change the textContent of the <script> tag and have it run the new code that I've inserted. Thanks! Paul S. If you don't mind using the evil eval , you can re-evaluate most

Trouble programmatically adding CSS to IE

阅读更多关于 Trouble programmatically adding CSS to IE

I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet). Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward: document.getElementsByTagName('head')[0].appendChild(s); Where "s" is a link object created with document.createElement . Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document

Building a web crawler - using Webkit packages

阅读更多关于 Building a web crawler - using Webkit packages

I'm trying to build a web crawler. I need 2 things: Convert the HTML into a DOM object. Execute existing JavaScripts on demand. The result I expect is a DOM Object, where the JavaScript that executes on-load is already executed. Also, I need an option to execute on demand additional JavaScripts (on events like: onMouseOver , onMouseClick etc.) First of all, I couldn't find a good documentation source. I searched through Webkit Main Page but couldn't find much information for users of the package, and no usefull code examples. Also, in some forums I've seen instructions not to use the Webkit

AngularJS Informer service

阅读更多关于 AngularJS Informer service

I'm using Twitter Bootstrap for UI in my webapp. Particulary its Alert component. I want to write a simple angular service to wrap Bootstrap's Alert to have a possibility of informing users from any peace of angular code. Like this: Informer.inform("message", "ERROR"); // will result in alerting with `alert-error` class Informer.inform("message", "INFO"); // will result in alerting with `alert-info` class My idea is to to append the template to the end of the <body> : <div class="alert {{alertClass}} fade in informer" id="informer"> <button type="button" class="close" data-dismiss="alert">×<

jQuery - move element and return to its exact previous location?

阅读更多关于 jQuery - move element and return to its exact previous location?

I'm trying to use jQuery to move an element from one location to another in the DOM. There are elements identical to the originating container alongside it, so how do I store its exact previous location so it will return back to it? Here's an example... <div class="container"></div> <ul> <li></li> <li><div class="move">Content</div></li> <li></li> <li><div class="move">Content</div></li> <li></li> </ul> ...the "move" divs are individually moving to the "container" div, then back to their previous location on an event via jQuery .appendTo(). How do I ensure each "move" div returns to its exact

remove 3 last divs with jQuery

阅读更多关于 remove 3 last divs with jQuery

<div id="widgetAreaFooter"> <div class="row">1</div> <div class="row">2</div> <div class="row">3</div> <div class="row">4</div> <div class="row">5</div> <div class="row">6</div> <div class="row">7</div> </div> How to remove the 3 last div ? I tryed this but it doesn't work :/ var row = $( '#widgetAreaFooter>.row' ); var nbr = row.length ; for ( var i=4;i<nbr;i++ ) row.get(i).remove(); or for ( var i=4;i<nbr;i++ ) row[i].remove(); This will remove the last three elements: $('#widgetAreaFooter > .row').slice(-3).remove(); jsFiddle Demo You can get a part of a jQuery collection using .slice() .