5

Em javascript, eu posso fazer:

var span = document.createElement('span');
span.innerHTML = 'foo';
span.className = 'bar';

Existe algo similar para que possa criar um ElementNode em PHP, ao menos com os atributos básicos (name, class, id, etc.)? Exemplo:

$span = HTML::create('span');
$span->innerHtml = 'foo';
$span->className = 'bar';

echo $span->toString();

E o resultado ser:

<span class="bar">foo</span>
2
  • 2
    Já considerou a possibilidade de usar um engine de templates? Com um você injeta variáveis diretamente em um html, dispensando o tipo de função que você está querendo usar.
    – bfavaretto
    Commented 23/01/2014 às 2:52
  • Vou pesquisar sobre para saber como é. Commented 24/01/2014 às 19:28

3 Respostas 3

5

Diretamente não há uma função para isto, a coisa mais parecida é o DOMDocument::createElement, mas é orientado a XML. Entretanto, é relativamente simples implementar uma função própria pra isso.

Eis uma bem simples de se entender, vinda deste site.:

class html_element
{
    /* vars */
    var $type;
    var $attributes;
    var $self_closers;
    
    /* constructor */
    function html_element($type,$self_closers = array('input','img','hr','br','meta','link'))
    {
        $this->type = strtolower($type);
        $this->self_closers = $self_closers;
    }
    
    /* get */
    function get($attribute)
    {
        return $this->attributes[$attribute];
    }
    
    /* set -- array or key,value */
    function set($attribute,$value = '')
    {
        if(!is_array($attribute))
        {
            $this->attributes[$attribute] = $value;
        }
        else
        {
            $this->attributes = array_merge($this->attributes,$attribute);
        }
    }
    
    /* remove an attribute */
    function remove($att)
    {
        if(isset($this->attributes[$att]))
        {
            unset($this->attributes[$att]);
        }
    }
    
    /* clear */
    function clear()
    {
        $this->attributes = array();
    }
    
    /* inject */
    function inject($object)
    {
        if(@get_class($object) == __class__)
        {
            $this->attributes['text'].= $object->build();
        }
    }
    
    /* build */
    function build()
    {
        //start
        $build = '<'.$this->type;
        
        //add attributes
        if(count($this->attributes))
        {
            foreach($this->attributes as $key=>$value)
            {
                if($key != 'text') { $build.= ' '.$key.'="'.$value.'"'; }
            }
        }
        
        //closing
        if(!in_array($this->type,$this->self_closers))
        {
            $build.= '>'.$this->attributes['text'].'</'.$this->type.'>';
        }
        else
        {
            $build.= ' />';
        }
        
        //return it
        return $build;
    }
    
    /* spit it out */
    function output()
    {
        echo $this->build();
    }
}

Exemplo de uso:

$my_anchor = new html_element('a');
$my_anchor->set('href','http://davidwalsh.name');
$my_anchor->set('title','David Walsh Blog');
$my_anchor->set('text','Click here!');
$my_anchor->output();
//<a href="http://davidwalsh.name" title="David Walsh Blog">Click here!</a>

Autor: David Walsh

Segue o exemplo adaptado pros parâmetros dados na pergunta:

$span = new html_element('span');
$span->set('text', 'foo');
$span->set('class', 'bar');
$span->output();
//<span class="bar">foo</span>
1
  • A pra fazer os appends? É, pelo jeito, terei que "reinventar a roda" mais uma vez. Commented 23/01/2014 às 0:02
3

Existe em PHP a classe DOMDocument, que permite realizar o pretendido.

Exemplo fazendo uso do método createElement:

<?php
$domDocumento = new DOMDocument('1.0', "UTF-8");
$domElemento = $domDocument->createElement('field','conteudo');
$domAtributo = $domDocument->createAttribute('name');

// Setando valor para o atributo
$domAtributo->value = 'valor';

// Inserindo atributo no elemento
$domElemento->appendChild($domAtributo);

// Inserindo elemento no documento
$domDocumento->appendChild($domElemento);
?>
2

Para a criação de XML (ou XHTML) completo a melhor solução é a API do DOMDocument, como mencionado nas outras respostas.

Porém, se o seu objetivo é simplesmente criar uma Tag HTML qualquer de forma simples, creio que existem formas mais simples.

Solução simples: uma função

Em alguns minutos rascunhei a seguinte função:

function createElement($tag_name, array $attributes = array(), $content = null) {

    $attr_text = '';
    foreach ($attributes as $name => $value) {
        $attr_text .= ' ' . $name . '="' . $value . '"';
    }
    return '<' . $tag_name . $attr_text . 
            (is_null($content) ? '/>' : '>' . $content . '</' . $tag_name . '>');

}

Exemplos de uso:

createElement('br');
createElement('button', array(), '');
createElement('input', array('type' => 'submit', 'id' => 'enviar'));
createElement('textarea', array('id' => 'caixa-de-texto'), 'Contéudo da textarea');

Retorno das chamadas acima, na ordem:

<br/>
<button></button>
<input type="submit" id="enviar"/>
<textarea id="caixa-de-texto">Contéudo da textarea</textarea>

Veja o exemplo funcional em http://codepad.org/a4qLJZq8.

Se encontrar algum caso diferente, você pode simplesmente ir aperfeiçoando a função.

Solução um pouco mais completa: uma classe

Encontrei neste link uma classe criada exatamente com o mesmo intuito desta pergunta. A implementação não é complicada e permite uma abordagem orientada a objetos.

Segue o código:

/* creates an html element, like in js */
class html_element
{
    /* vars */
    var $type;
    var $attributes;
    var $self_closers;

    /* constructor */
    function html_element($type,$self_closers = array('input','img','hr','br','meta','link'))
    {
        $this->type = strtolower($type);
        $this->self_closers = $self_closers;
    }

    /* get */
    function get($attribute)
    {
        return $this->attributes[$attribute];
    }

    /* set -- array or key,value */
    function set($attribute,$value = '')
    {
        if(!is_array($attribute))
        {
            $this->attributes[$attribute] = $value;
        }
        else
        {
            $this->attributes = array_merge($this->attributes,$attribute);
        }
    }

    /* remove an attribute */
    function remove($att)
    {
        if(isset($this->attributes[$att]))
        {
            unset($this->attributes[$att]);
        }
    }

    /* clear */
    function clear()
    {
        $this->attributes = array();
    }

    /* inject */
    function inject($object)
    {
        if(@get_class($object) == __class__)
        {
            $this->attributes['text'].= $object->build();
        }
    }

    /* build */
    function build()
    {
        //start
        $build = '<'.$this->type;

        //add attributes
        if(count($this->attributes))
        {
            foreach($this->attributes as $key=>$value)
            {
                if($key != 'text') { $build.= ' '.$key.'="'.$value.'"'; }
            }
        }

        //closing
        if(!in_array($this->type,$this->self_closers))
        {
            $build.= '>'.$this->attributes['text'].'</'.$this->type.'>';
        }
        else
        {
            $build.= ' />';
        }

        //return it
        return $build;
    }

    /* spit it out */
    function output()
    {
        echo $this->build();
    }
}

Exemplo de uso:

$my_anchor = new html_element('a');
$my_anchor->set('href','http://davidwalsh.name');
$my_anchor->set('title','David Walsh Blog');
$my_anchor->set('text','Click here!');
$my_anchor->output();

Isso gera a saída:

<a href="http://davidwalsh.name" title="David Walsh Blog">Click here!</a>

Essa implementação básica faz quase a mesma coisa da função apresentada no tópico anterior, mas permite estender facilmente as funcionalidades.

Lendo os comentários do site onde encontrei a classe é possível encontrar várias postagens de melhorias para a classe, por exemplo a possibilidade de incluir elementos filhos ou uma função para setar estilos CSS individualmente.

Pessoalmente, eu incluiria setters para receber array associativo tanto de atributos quanto de estilos.

Solução completa: uma biblioteca

Após olhar todos os comentários do link anterior, vi que alguém pegou a mesma ideia e escreveu uma pequena biblioteca chamada phpcreatehtml para tornar a criação de HTML mais fácil.

Veja um exemplo de uso:

$php=create('html',
  $head = head(title('My Page')),
  body(
    $header = div('class','header'),
    $body = div('class','main'),
    $footer = div('class','footer')
  )
);
$body->append(h1('This example'));
$body->append(
  h2('is more convenient!'),
  div('class','main')->append(
    p('It uses less confusing technics to code.')
  )
);
echo $php;

Isso gera a seguinte saída:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div class="header"></div>
    <div class="main">
      <h1>This example</h1>
      <h2>is more convenient!</h2>
      <div class="main">
        <p>It uses less confusing technics to code.</p>
      </div>
    </div>
    <div class="footer"></div>
  </body>
</html>

Conclusões

Acho que você não vai precisar "reinventar a roda mais uma vez", porque várias pessoas já fizeram.

Apenas defina o nível de complexidade que você vai precisar. Se for apenas para imprimir elementos simples, eu iria pela solução mais simples (função) e assim por diante.

4
  • A cada elemento, pretendo adicionar uma lista de elementos (childs), assim como o DOM. O que acha? Assim, eu poderei acessar elementos dentro de outros elementos facilmente. Commented 29/01/2014 às 19:29
  • @CalebeOliveira Não entendi bem o seu objetivo. Além de gerar, você quer acessar/manipular em memória ainda? Tem como dizer qual seu objetivo final com essa implementação?
    – utluiz
    Commented 29/01/2014 às 19:40
  • Faz parte de um framework que construo, este manipulará o html de algumas views. Commented 29/01/2014 às 19:43
  • 1
    @CalebeOliveira Nesse caso é melhor usar o DOM do PHP mesmo. Os métodos que postei aqui são para a criação de elementos simples. Com o DOM você poderá carregar o HTML e manipular o conteúdo programaticamente.
    – utluiz
    Commented 29/01/2014 às 19:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .