Element methods | laravel-html | Spatie SPATIE Laravel HTML =============== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-html](https://spatie.be/docs/laravel-html/v2) General-usage Element methods Version v3 v2 v1 Other versions for crawler [v3](https://spatie.be/docs/laravel-html/v3) [v2](https://spatie.be/docs/laravel-html/v2) [v1](https://spatie.be/docs/laravel-html/v1) - [ Introduction ](https://spatie.be/docs/laravel-html/v2/introduction) - [ Postcardware ](https://spatie.be/docs/laravel-html/v2/postcardware) - [ Installation & setup in Laravel ](https://spatie.be/docs/laravel-html/v2/installation-setup) - [ Upgrading ](https://spatie.be/docs/laravel-html/v2/upgrading) - [ Questions and issues ](https://spatie.be/docs/laravel-html/v2/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-html/v2/changelog) General usage ------------- - [ Core concepts ](https://spatie.be/docs/laravel-html/v2/general-usage/core-concepts) - [ HTML builder ](https://spatie.be/docs/laravel-html/v2/general-usage/html-builder) - [ Element classes ](https://spatie.be/docs/laravel-html/v2/general-usage/element-classes) - [ Element methods ](https://spatie.be/docs/laravel-html/v2/general-usage/element-methods) - [ The class() helper ](https://spatie.be/docs/laravel-html/v2/general-usage/the-class-helper) You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command: ` composer show spatie/laravel-html ` Element methods =============== ### On this page 1. [ Available methods ](#content-available-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()`](#codeattributecode) - [`attributes()`](#codeattributescode) - [`forgetAttribute()`](#codeforgetattributecode) - [`getAttribute()`](#codegetattributecode) - [`class()`](#codeclasscode) - [`id()`](#codeidcode) - [`data()`](#codedatacode) - [`child()` and `children()`](#codechildcode-and-codechildrencode) - [`prependChild()` and `prependChildren()`](#codeprependchildcode-or-codeprependchildrencode) - [`text()`](#codetextcode) - [`if()`](#codeifcode) - [`open()`](#codeopencode) - [`close()`](#codeclosecode) - [`render()`](#coderendercode) You can also call all those methods with the suffix `If` in order to execute the method only if the first parameter is `true`. ``` echo Div::classIf(true, 'row'); // "" echo Div::classIf(false, 'row'); // "" echo Div::attributeIf(50 > 100, 'data-custom', 'Attribute value'); // "" ``` `attribute()` --------------------------------------------------------------------------------------- Sets an attribute on the element: ``` echo Div::attribute('data-custom', 'Attribute value'); // "" ``` `attributes()` ------------------------------------------------------------------------------------------ Sets multiple attributes from an array or collection: ``` echo Div::attributes(['data-id' => '123', 'data-username' => 'John']); // "" ``` `forgetAttribute()` --------------------------------------------------------------------------------------------------------- Remove an attribute from an element: ``` echo Div::attribute('data-custom', 'Attribute value') ->forgetAttribute('data-custom'); // "" ``` `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'); // "" ``` `id()` ------------------------------------------------------------------ Sets the id of the element overwriting any previously set `id`s: ``` echo Div::id('btn-123'); // "" ``` `data()` ------------------------------------------------------------------------ Add a data- attribute: ``` echo Div::data('btn', 123); // "" ``` `child()` and `children()` ---------------------------------------------------------------------------------------------------------------------- Adds one or more child elements to the element: ``` echo Div::child(P::text('This is the first paragraph')) // "This is the first paragraph" echo Div::children([P::text('This is the first paragraph'), Span::text('Span content')]) // "This is the first paragraphSpan content" ``` 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 `` element will be created for each string and added as a child of `` }); // "........." ``` `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); // FirstSecond ``` 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"'); // "This text is "ironic"" ``` `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'); }); // "10.000 is over 9.000" ``` `open()` ------------------------------------------------------------------------ Returns the elements opening tag as a `Illuminate\Support\HtmlString` including all children. ``` echo Div::child(P::text('First child'))->open(); // "First child" ``` In combination with the `close()` method this can be really useful for rendering forms: ``` {{ Form::action('/post-url')->method('POST')->open() }} {{ Form::close() }} ``` `close()` --------------------------------------------------------------------------- Returns the elements closing tag as a `Illuminate\Support\HtmlString` (if the element is not a void element like for example ``). ``` echo Div::child(P::text('First child'))->close(); // "" ``` `render()` ------------------------------------------------------------------------------ Returns the complete element including all children as a `Illuminate\Support\HtmlString`. ``` echo Div::child(P::text('First child'))->render(); // "First child" ```