M4Q Manipulation

Add, remove or clone elements into/from DOM.

append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( ".inner" ).append( "<p>Test</p>" );
                

Result:


                    <div class="container">
                      <div class="inner">
                        Hello
                        <p>Test</p>
                      </div>
                      <div class="inner">
                        Goodbye
                        <p>Test</p>
                      </div>
                    </div>
                

prepend()

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( ".inner" ).prepend( "<p>Test</p>" );
                

Result:


                    <div class="container">
                      <div class="inner">
                        <p>Test</p>
                        Hello
                      </div>
                      <div class="inner">
                        <p>Test</p>
                        Goodbye
                      </div>
                    </div>
                

appendTo()

Insert every element in the set of matched elements to the end of the target. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( "<p>Test</p>" ).appendTo(".inner");
                

Result:


                    <div class="container">
                      <div class="inner">
                        Hello
                        <p>Test</p>
                      </div>
                      <div class="inner">
                        Goodbye
                        <p>Test</p>
                      </div>
                    </div>
                

prependTo()

Insert every element in the set of matched elements to the beginning of the target. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( "<p>Test</p>" ).prependTo(".inner");
                

Result:


                    <div class="container">
                      <div class="inner">
                        <p>Test</p>
                        Hello
                      </div>
                      <div class="inner">
                        <p>Test</p>
                        Goodbye
                      </div>
                    </div>
                

insertAfter()

Insert every element in the set of matched elements after the target. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( "<p>Test</p>" ).insertAfter(".inner");
                

Result:


                    <div class="container">
                      <div class="inner">Hello</div>
                      <p>Test</p>
                      <div class="inner">Goodbye</div>
                      <p>Test</p>
                    </div>
                

insertBefore()

Insert every element in the set of matched elements before the target. Parameter types: selector, htmlString, Element, array of Elements, m4q object.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( "<p>Test</p>" ).insertAfter(".inner");
                

Result:


                    <div class="container">
                      <p>Test</p>
                      <div class="inner">Hello</div>
                      <p>Test</p>
                      <div class="inner">Goodbye</div>
                    </div>
                

after()

Insert content, specified by the parameter, after each element in the set of matched elements.


                    <div class="container">
                      <div class="inner">Hello</div>
                      <div class="inner">Goodbye</div>
                    </div>
                

                    $( ".inner" ).after("123");
                

Result:


                    <div class="container">
                        <div class="inner">Hello</div>
                        123
                        <div class="inner">Goodbye</div>
                        123
                    </div>
                

before()

Insert content, specified by the parameter, before each element in the set of matched elements.


                    <div class="container">
                        <div class="inner">Hello</div>
                        <div class="inner">Goodbye</div>
                    </div>
                

                    $( ".inner" ).before("123");
                

Result:


                    <div class="container">
                        123
                        <div class="inner">Hello</div>
                        123
                        <div class="inner">Goodbye</div>
                    </div>
                

remove()

Remove the set of matched elements from the DOM.


                    <div class="container">
                        <div class="inner">Hello</div>
                        <div class="inner second">Goodbye</div>
                    </div>
                

Remove all matched


                    $( ".inner" ).remove();
                

Result:


                    <div class="container">
                    </div>
                

Remove filtered by selector


                    $( ".inner" ).remove(".second");
                

Result:


                    <div class="container">
                        <div class="inner">Hello</div>
                    </div>
                

clone()

Create a deep copy of the set of matched elements. If you set function argument to true, the whole subtree (including text that may be in child Text nodes) is copied too. Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g., node.onclick = fn). Moreover, for a <canvas> element, the painted image is not copied.

The duplicate node returned by clone() is not part of the document until it is added to another node that is part of the document using manipulation methods.


                    <div class="container">
                        <div class="inner"><p>Hello</p></div>
                    </div>
                

                    $( ".inner" ).clone().appendTo(".container");
                    --------------------------------------------
                    <div class="container">
                        <div class="inner"><p>Hello</p></div>
                        <div class="inner"></div>
                    </div>
                

                    $( ".inner" ).clone(true).appendTo(".container");
                    --------------------------------------------
                    <div class="container">
                        <div class="inner"><p>Hello</p></div>
                        <div class="inner"><p>Hello</p></div>
                    </div>