Element methods

All Spatie\Html\Elements have some methods that make working with elements easy. All these methods can be chained together fluently and every method will return a new Element instance. This way you can preserve the original Element if necessary.

Available methods


Sets an attribute on the element:

echo Div::attribute('data-custom', 'Attribute value');
// "<div data-custom="Attribute value"></div>"


Only sets an attribute on the element if a condition is met:

echo Div::attributeIf(50 > 100, 'data-custom', 'Attribute value');
// "<div></div>"


Sets multiple attributes from an array or collection:

echo Div::attributes(['data-id' => '123', 'data-username' => 'John']);
// "<div data-id="123" data-username="John"></div>"


Remove an attribute from an element:

echo Div::attribute('data-custom', 'Attribute value')
// "<div></div>"


Get the value of an element's attribute:

echo Div::attribute('data-custom', 'Attribute value')
// "data-custom"

You may also specify a fallback value:

echo Div::getAttribute('data-username', 'Unknown');
// "Unknown"


Adds a class to the element.

echo Div::class('btn');
// "<div class="btn"></div>"


Sets the id of the element overwriting any previously set ids:

echo Div::id('btn-123');
// "<div id="btn-123"></div>"

child() and children()

Adds one or more child elements to the element:

echo Div::child(P::text('This is the first paragraph'))
// "<div><p>This is the first paragraph</p></div>"

echo Div::children([P::text('This is the first paragraph'), Span::text('Span content')])
// "<div><p>This is the first paragraph</p><span>Span content</span></div>"

You may also provide a mapper function that will be called for each child:

$content = ['First paragraph', 'Second paragraph', 'Third paragraph'];
echo Div::children($content, function ($content) {
    return P::text($content); // A new `<p>` element will be created for each string and added as a child of `<div>`
// "<div><p>...</p><p>...</p><p>...</p></div>"

prependChild() and prependChildren()

Prepends one or more child-elements before the existing children on the element.

$paragraphOne = P::text('First');
$paragraphTwo = P::text('Second');
$divElement = Div::child($paragraphTwo)
// <div><p>First</p><p>Second</p></div>

Just like the children() method you may provide a mapper function as the second argument that will be called for each child to be prepended.


Sets the inner contents of the element. Any HTML will be escaped with htmlentities() (if you do wish to add inner HTML use html()).

echo Div::text('This text is "ironic"');
// "<div>This text is &quot;ironic&quot;</div>"


Condintionally transform the element. Note that since elements are immutable, you'll need to return a new instance from the callback.

echo Div::if(10000 > 9000, function ($divElement) {
    return $divElement->text('10.000 is over 9.000');
// "<div>10.000 is over 9.000</div>"


Returns the elements opening tag as a Illuminate\Support\HtmlString including all children.

echo Div::child(P::text('First child'))->open();
// "<div><p>First child</p>"

In combination with the close() method this can be really useful for rendering forms:

{{ Form::action('/post-url')->method('POST')->open() }}

<!-- Other form inputs here -->

{{ Form::close() }}


Returns the elements closing tag as a Illuminate\Support\HtmlString (if the element is not a void element like for example <br>).

echo Div::child(P::text('First child'))->close();
// "</div>"


Returns the complete element including all children as a Illuminate\Support\HtmlString.

echo Div::child(P::text('First child'))->render();
// "<div><p>First child</p></div>"