Html Append and Prepend

modified: 2019-06-16T11:23:33+02:00

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