🪄 DOMOPS API

The DOMOPS API (Document Object Model Operations) provides a set of powerful methods that allow you to manipulate the behavior and content of the frontend of your application. These methods can be utilized both in the backend and directly within the frontend code.

These methods offer a robust toolkit for dynamic manipulation of the DOM elements and content, enhancing the interactive experience of your application's frontend.

Methods

setContent

• This method sets the content of a specified element.

  <?php

  $response = new \dobron\BigPipe\DialogResponse();

  $response->setContent(

  'span.current-date', // selector

  date('Y-m-d H:i:s')

  );

  $response->send();
  import DOM from "bigpipe-util/src/core/DOM";

  DOM.prependContent(

  document.querySelector('span.current-date'), // element

  new Date().toLocaleString()

  );

appendContent

• Use this method to insert content as the last child of a specified element.

  $response->appendContent(

  'ul.logs',

  '<li>appended line</li>'

  );
  DOM.appendContent(

  document.querySelector('ul.logs'),

  '<li>appended line</li>'

  );

prependContent

• This method inserts content as the first child of a specified element.

  $response->prependContent(

  'ul.logs',

  '<li>prepended line</li>'

  );
  DOM.prependContent(

  document.querySelector('ul.logs'),

  '<li>prepended line</li>'

  );

insertAfter

• Use this method to insert content after a specified element.

  $response->insertAfter(

  'div.card',

  '<div class="card">content</div>'

  );
  DOM.insertAfter(

  document.querySelector('div.card'),

  '<div class="card">content</div>'

  );

insertBefore

• This method inserts content before a specified element.

  $response->insertBefore(

  'div.card',

  '<div class="card">content</div>'

  );
  DOM.insertAfter(

  document.querySelector('div.card'),

  '<div class="card">content</div>'

  );

remove

• This method inserts content before a specified element.

  $response->remove(

  '#content[post-id="123"]',

  );
  DOM.remove(

  document.querySelector('#content[post-id="123"]')

  );

replace

• This method replaces a specified element with new content.

  $response->replace(

  'div.content',

  '<div class="content">new content</div>',

  );
  DOM.replace(

  document.querySelector('div.content'),

  '<div class="content">new content</div>'

  );

eval

• Use this method to evaluate JavaScript code provided as a string.

  $response->eval(

  'body',

  'alert("Hello World!");',

  );
  DOM.eval(

  document.querySelector('body'),

  'alert("Hello World!");'

  );

Live Example

You can observe this API in action in the demo page provided.