Webanizr Logo
Open / sluit menu
Module domManipulation

Last change: August 22, 2019

Current version: 1.6.0

The domManipulation module allows you to manipulate the DOM model of the page.

syntax

webanizr.send('domManipulation', data, parameters, callback);

data

Not used by this module, but passed on to the next module.

parameters

The domManipulation accepts the following parameters:

type__manipulation (required)

The type of manipulation you want to perform. The following options are supported:

  • remove: removes the selected elements
  • place-in: places the selected elements in a container in the order that they are found
  • place-before: places the selected elements before an element in the order that they are found
  • place-after: places the selected elements after an element in the order that they are found
  • disable: sets the disable attribute to true (only applicable for form fields)
  • toggle-css-hidden: show / hides the element using the css display property
  • toggle-dom-hidden: show / hides the element using the hidden attribute
  • image-src: changes the src of the image. Uses the value of the parameter src__image as the new src of the image
  • toggle-css: toggles css attributes. E.g. { maxHeight : [ '100px', '500px', '8000px' ] } will toggle the max height of the element(s) from 100px to 500px to 8000px and back to 100px again.
  • inner-html: sets the html content of the element(s)

query__selector (required)

The selector that defines the elements the manipulation should be applied to. You can also use a DOM element as value.

id__relativeelement (required by some)

The element that is used as reference or target element. Ie with the place-in manipulation this is the container all selected element are placed in. You can also use a DOM element as value.

src__image (optional for task image-src)

The new srch for the image(s) when the type of manupilation is image-src.

html__content (optional for task inner-html)

The html content to be placed in the element(s)

callback

The callback is called with the original data.

demos

https://cdn.cpmodules.webanizr.com/demo/dom-manipulations/index.html

Changelog

  • August 22, 2019: 1.6.0 - Added inner-html option