Html Append and Prepend

If you want to insert html or text elements at the end or the beginning, these methods are the right ones.

Append new Node into the given html-id

This method is form-save. That means, if you append an element into an hand-filled-form, the filled datas will NOT be lost. If that target-html element empty the method inserts the Dom-node also. The first example without an wrapping html-tag will be append as an Text-Node.

Factory::getResponseInstance()->appendHtml('htmlElementId', 'myText');
or
Factory::getResponseInstance()->appendHtml('htmlElementId', '<input type="text" />');

While using the appendHtml without wrapping html-tag an possible trailing tag will be ignored! This expressions does not have an root-node. They has mor then 1 Node

Bad Examples

  • Factory::getResponseInstance()->appendHtml('htmlElementId', 'myText<br />');
  • Factory::getResponseInstance()->appendHtml('htmlElementId', 'myText<p>p-tag not parsed</p>');
  • Factory::getResponseInstance()->appendHtml('htmlElementId', '<p>p-tag not parsed</p>myText');
  • Factory::getResponseInstance()->appendHtml('htmlElementId', '<br />myText<p>p-tag not parsed</p>');

As Jybrid-script javascript appendHtml

Also you can use class name handling in your javascript files like in other javascript-frameworks.

jybrid.appendHtml

Most Save method (keep form-values and events)

jybrid.appendHtml('id','string')
// or
jybrid.appendHtml('id','<p>something</p>')
<div id="id">
<span>Text</span>
<!-- jybrid.appendHtml('id','<p>something</p>') -->
<p>something</p>
</div>
xajax was xajax.append()
 xajax.append('html_id','innerHTML','your content/ html content');

The xajax method loses the form field values already entered during the response. The method loses also attached events in this parent

Prepend new Node into the given html-id

This method is form-save. That means, if you prepend an element into an hand-filled-form, the filled datas will NOT be lost. If that target-html element empty the method inserts the Dom-node also. The first example without an wrapping html-tag will be prepend as an Text-Node.

Factory::getResponseInstance()->prependHtml('htmlElementId', 'myText');
or
Factory::getResponseInstance()->prependHtml('htmlElementId', '<input type="text" />');

As Jybrid-script javascript prepend

Also you can use class name handling in your javascript files like in other javascript-frameworks.

jybrid.prependHtml
jybrid.prependHtml('id','string')
// or
jybrid.prependHtml('id','<p>something</p>')
<div id="id">
<p>something</p>
<!-- jybrid.prependHtml('id','<p>something</p>') -->
<span>Text</span>
</div>
xajax was xajax.prepend()
xajax.prepend('html_id','innerHTML','your content/ html content');

Demo ClassNames Append and Prepend

Alternative or similar jybrid/xajax methods

Perhaps you are looking for specific actions have a look into: Various Append and Prepend

further reading append and prepend examples

@see ajax-html-append-prepend.php

Javascript References

HTML DOM appendChild() Method