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

• attribute()
• attributeIf()
• attributes()
• forgetAttribute()
• getAttribute()
• class()
• id()
• child() and children()
• prependChild() and prependChildren()
• text()
• if()
• open()
• close()
• render()

##attribute()

Sets an attribute on the element:

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

##attributeIf()

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

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

##attributes()

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>"

##forgetAttribute()

Remove an attribute from an element:

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

##getAttribute()

Get the value of an element's attribute:

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

You may also specify a fallback value:

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

##class()

Adds a class to the element.

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

##id()

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)
                 ->preprendChild($paragraphOne);
// <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.

##text()

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>"

##if()

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>"

##open()

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() }}

##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>"

##render()

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>"