PHPackages                             yetii/html-element - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. yetii/html-element

ActiveLibrary[Utility & Helpers](/categories/utility)

yetii/html-element
==================

Generates HTML (elements) based on a schematic

1.1.3(6y ago)14442[1 issues](https://github.com/UnDeAdYeTii/html-element/issues)1MITPHPPHP ^7.2CI failing

Since Jul 7Pushed 6y agoCompare

[ Source](https://github.com/UnDeAdYeTii/html-element)[ Packagist](https://packagist.org/packages/yetii/html-element)[ RSS](/packages/yetii-html-element/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (6)Dependencies (1)Versions (8)Used By (1)

HTML Element (DISCONTINUED - NO LONGER MAINTAINED)
==================================================

[](#html-element-discontinued---no-longer-maintained)

Provides a more robust alternative to generating HTML

### Requires

[](#requires)

- **PHP:** >= 7.2

### Usage

[](#usage)

The using is fairly simple. Firstly, you have the different `Element`s under the `YeTii\HtmlElement\Elements` namespace, for example a `` element is `YeTii\HtmlElement\Elements\HtmlDiv`, an `` element is `YeTii\HtmlElement\Elements\HtmlInput`, etc. This is except for the `YeTii\HtmlElement\TextNode`. See below for full list of classes.

**Basic Usage:**

The first argument for the `Element` is an array of attributes (key => value).

The second being an optional (not really used at the moment) name to override the default name. The default name is the class name in lowercase, stripped of the `Html` prefix, for example `HtmlInput` is rendered using the name `input`). This argument may be removed in future versions, the idea was to be able to support Vue-like component names. Alternatively you can use `$element->setName($name);` to set a name (and `$element->getName();` to retrieve it)

```
$element = new HtmlInput([
    'type' => 'date',
    'id' => 'dob_field',
    'name' => 'dob',
]);

$element->render(); //

// Or try a custom element name (if generating Vue, for example)
$element->setName('dob-picker');

$element->render(); //
```

**Child Elements:**

You can specify a child by providing a `node` or `nodes` "attribute" as a quickhand for adding a child node or multiple children nodes. Alternatively, you can go: `$parent->addChild(Element $child);` or `$parent->addChildren(array $children);`

```
$child1 = new HtmlSpan([
    'class' => 'test',
    'nodes' => [
        new HtmlSpan([
            'class' => 'span-here',
            'node' => 'what?',
        ]),
        new HtmlBold([
            'title' => 'This is bold',
            'node' => 'Just text here'
        ])
    ]
]);

$child2 = new HtmlSpan([
    'class' => 'test-node',
    'nodes' => [
        new HtmlSpan([
            'class' => 'a-class',
            'node' => 'who?',
        ])
    ]
]);
$child2->addChild(new HtmlBold([
    'title' => 'Bold text',
    'node' => 'Stuff here'
]));

$div = new HtmlDiv([
    'id' => 'section',
    'class' => 'class-name',
]);
$div->addChildren([
    $child1,
    $child2
]);
```

**Text Nodes:**

If you provide a string as a child element(s), it's automatically converted into a text node element.

Text node `Element`s can only have text child elements, which are contacted together when rendered. You may manually specify a `TextNode` instance:

```
$text = new \Html\HtmlElement\TextNode([
    'node' => 'This is some text',
]);

$text->render(); // This is some text

$div = new HtmlDiv([
    'node' => $text
]);

$div->render(); // This is some text

$div = new HtmlDiv([
    'node' => 'So is this'
]);

$div->render(); // So is this
```

**Things to note:**

The order you specify the attributes correlates to the order they are rendered.

```
$div = new HtmlDiv([
    'id' => 'a',
    'title' => 'b',
    'class' => 'c',
    'data-id' => 'd',
]);

$div->render(); //

$div = new HtmlDiv([
    'title' => 'b',
    'data-id' => 'd',
    'class' => 'c',
    'id' => 'a',
]);

$div->render(); //
```

**htmlspecialchars:**

You can also specify whether or not to encode html special characters by doing the following:

```
$div = new HtmlDiv([
    'node' => 'Text',
]);
$div->escapeHtml();

$div->render(); // <b>Text</b>
```

Currently, inheritance does NOT apply to escaping of HTML, meaning that if the parent `Element` is escaping HTML and you provide a child `Element`, and that child `Element` has a text node with HTML - it will NOT be escaped. You must define whether or not to escape the HTML per `Element`. Take the following as an example:

```
$child = new HtmlSpan([
    'node' => 'Some text',
]);
$parent = new HtmlDiv([
    'nodes' => [
        'Some text',
        $child
    ]
]);
$parent->escapeHtml();

$parent->render(); // <b>Text</b>Some text
```

The text nodes that are immediate children are escaped, but the `$child` does not inherit that, so it does not escape the HTML in the text node.

Should you want a child `Element` to NOT escape HTML, but would like the immediate parent to, you may do so by doing the following:

```
$child1 = new HtmlSpan([
    'node' => 'Some text',
]);
$child1->escapeHtml(false);
$child2 = new HtmlSpan([
    'node' => 'Some text',
]);
$parent = new HtmlDiv([
    'nodes' => [
        'Some text',
        $child2,
    ]
]);
$parent->escapeHtml(true);

$parent->render(); // <b>Text</b>Some text
```

**Full list of Element classes:**

- ``: `HtmlA`
- ``: `HtmlAbbr`
- ``: `HtmlAddress`
- ``: `HtmlArea`
- ``: `HtmlArticle`
- ``: `HtmlAside`
- ``: `HtmlAudio`
- ``: `HtmlB`
- ``: `HtmlBdi`
- ``: `HtmlBdo`
- ``: `HtmlBlockquote`
- ``: `HtmlBody`
- ``: `HtmlBr`
- ``: `HtmlButton`
- ``: `HtmlCanvas`
- ``: `HtmlCaption`
- ``: `HtmlCite`
- ``: `HtmlCode`
- ``: `HtmlCol`
- ``: `HtmlColgroup`
- ``: `HtmlCommand`
- ``: `HtmlDatalist`
- ``: `HtmlDd`
- ``: `HtmlDel`
- ``: `HtmlDetails`
- ``: `HtmlDfn`
- ``: `HtmlDiv`
- ``: `HtmlDl`
- ``: `HtmlDt`
- ``: `HtmlEm`
- ``: `HtmlEmbed`
- ``: `HtmlFieldset`
- ``: `HtmlFigcaption`
- ``: `HtmlFigure`
- ``: `HtmlFooter`
- ``: `HtmlForm`
- ``: `HtmlH1`
- ``: `HtmlH2`
- ``: `HtmlH3`
- ``: `HtmlH4`
- ``: `HtmlH5`
- ``: `HtmlH6`
- ``: `HtmlHead`
- ``: `HtmlHeader`
- ``: `HtmlHr`
- ``: `HtmlHtml`
- ``: `HtmlI`
- ``: `HtmlIframe`
- ``: `HtmlImg`
- ``: `HtmlInput`
- ``: `HtmlIns`
- ``: `HtmlKbd`
- ``: `HtmlKeygen`
- ``: `HtmlLabel`
- ``: `HtmlLegend`
- ``: `HtmlLi`
- ``: `HtmlMain`
- ``: `HtmlMap`
- ``: `HtmlMark`
- ``: `HtmlMenu`
- ``: `HtmlMeter`
- ``: `HtmlNav`
- ``: `HtmlObject`
- ``: `HtmlOl`
- ``: `HtmlOptgroup`
- ``: `HtmlOption`
- ``: `HtmlOutput`
- ``: `HtmlP`
- ``: `HtmlParam`
- ``: `HtmlPre`
- ``: `HtmlProgress`
- ``: `HtmlQ`
- ``: `HtmlRp`
- ``: `HtmlRt`
- ``: `HtmlRuby`
- ``: `HtmlS`
- ``: `HtmlSamp`
- ``: `HtmlSection`
- ``: `HtmlSelect`
- ``: `HtmlSmall`
- ``: `HtmlSource`
- ``: `HtmlSpan`
- ``: `HtmlStrong`
- ``: `HtmlSub`
- ``: `HtmlSummary`
- ``: `HtmlSup`
- ``: `HtmlTable`
- ``: `HtmlTbody`
- ``: `HtmlTd`
- ``: `HtmlTextarea`
- ``: `HtmlTfoot`
- ``: `HtmlTh`
- ``: `HtmlThead`
- ``: `HtmlTime`
- ``: `HtmlTr`
- ``: `HtmlTrack`
- ``: `HtmlU`
- ``: `HtmlUl`
- ``: `HtmlVar`
- ``: `HtmlVideo`
- ``: `HtmlWbr`

**Interfaces:**

These interfaces change the way an element is rendered.

- `YeTii\HtmlElement\Interfaces\HasTextChild` renders an element with children as text-only (e.g. `text child here`)
- `YeTii\HtmlElement\Interfaces\IsSingleton` renders an element with no closing tag (e.g. ``)
- `YeTii\HtmlElement\Interfaces\IsTextNode` renders an element as a text node (i.e. raw or htmlspecialchar'd text)

**Custom Elements:**

You may want to create some custom elements, especially if generating something like vue component templates. Using the interfaces above, and extending the base `Element` class, it becomes a very easy task. Say you want an singleton element like ``

```