php - Modifying DOM to style sequential headings -

let's start html in database table:

<section id="love"> <h2 class="h2article">iii. love</h2> <div class="divarticle"> 

this display looks after run through dom script:

<section id="love"><h2 class="h2article" id="a3" data-toggle="collapse" data-target="#b3">iii. love</h2> <div class="divarticle collapse in article" id="b3"> 

and this:

<section id="love"><h2 class="h2article" id="a3" data- toggle="collapse" data-target="#b3">     <span class="article label label-primary">         <i class="only-collapsed fa fa-chevron-down"></i>         <i class="only-expanded fa fa-remove"></i> iii. love</span></h2> <div class="divarticle collapse in article" id="b3"> 

in other word, dom has given necessary function, correctly numbering each id sequentially. that's missing styling:

<span class="article"><span class="label label-primary"><i class="only- collapsed fa fa-chevron-down"></i><i class="only-expanded fa fa-remove"> </i> iii. love</span></span> 

can tell me how add styling? titles change, of course (e.g. iii. love, iv. hate, etc.). posted dom script below:

$i = 1; // initialize counter $dom = new domdocument; @$dom->loadhtml($content); // load markup $sections = $dom->getelementsbytagname('section'); // section tags     foreach($sections $section) { // each section tag          // div inside each section         foreach($section->getelementsbytagname('h2') $h2) {             if($h2->getattribute('class') == 'h2article') { // if div has class maindiv                 $h2->setattribute('id', 'a' . $i); // set id div tag                 $h2->setattribute('data-target', '#b' . $i);             }         }          foreach($section->getelementsbytagname('div') $div) {             if($div->getattribute('class') == 'divarticle') { // if div has class divarticle                 $div->setattribute('id', 'b' . $i); // set id div tag             }              if($div->getattribute('class') == 'divclose') { // if div has class maindiv                 $div->setattribute('data-target', '#b' . $i); // set id div tag             }         }         $i++; // increment counter     }  // string again, contents inside body $content = ''; foreach($dom->getelementsbytagname('body')->item(0)->childnodes $child) {     $content .= $dom->savehtml($child); // convert string , append container }  $content = str_replace('data-target', 'data-toggle="collapse" data-target', $content); $content = str_replace('<div class="divarticle', '<div class="divarticle collapse in article', $content); 

since in case dom document object being used, createelement function can used add html.

see http://php.net/manual/en/domdocument.createelement.php

and stealing documentation on attached page

<?php  $dom = new domdocument('1.0', 'utf-8');  $element = $dom->createelement('test', 'this root element!');  // insert new element root (child of document) $dom->appendchild($element);  echo $dom->savexml(); ?> 

will output

<?xml version="1.0" encoding="utf-8"?> <test>this root element!</test> 

---

without dom object, add php in 1 of following ways.

1.

echo "<div>this method used shorter pieces of html</div>"; 

2.

?> <div> can escape out of html , "turn" php on </div> <?php 

the first method uses echo command output string of html. second method uses
?> escape tag tell computer start treating html until sees opening <?php php tag.

so in php file can add html so.

?>     <span class="article">        <span class="label label-primary">            <i class="only- collapsed fa fa-chevron-down"></i>            <i class="only-expanded fa fa-remove"></i>             iii. love        </span>     </span> <?php 

but since in case we're trying edit content coming inside of database we're not able this.