How to get innerHTML of DOMNode?

Asked 18/1, 2010 at 15:34 Answered 26/3, 2023 at 17:51

108

What function do you use to get innerHTML of a given DOMNode in the PHP DOM implementation? Can someone give reliable solution?

Of course outerHTML will do too.

Msg answered 18/1, 2010 at 15:34 Comment(0)

172

Compare this updated variant with PHP Manual User Note #89718:

<?php 
function DOMinnerHTML(DOMNode $element) 
{ 
    $innerHTML = ""; 
    $children  = $element->childNodes;

    foreach ($children as $child) 
    { 
        $innerHTML .= $element->ownerDocument->saveHTML($child);
    }

    return $innerHTML; 
} 
?>

Example:

<?php 
$dom= new DOMDocument(); 
$dom->preserveWhiteSpace = false;
$dom->formatOutput       = true;
$dom->load($html_string); 

$domTables = $dom->getElementsByTagName("table"); 

// Iterate over DOMNodeList (Implements Traversable)
foreach ($domTables as $table) 
{ 
    echo DOMinnerHTML($table); 
} 
?>

Anjelicaanjou answered 18/1, 2010 at 15:38 Comment(8)

Thanks. It works fine. Shouldn't $dom->preserveWhiteSpace = false; be before document load? – Msg 18/1, 2010 at 18:59

@JohnM2: Yes it should. – Ictus 23/6, 2013 at 18:35

Additional notes: Since PHP 5.3.6 you can spare the temporary DOMDocument. Also one might want to replace the trim with an ltrim (or even remove it completely) to preserve a bit of the whitespace like line-breaks. – Ictus 23/6, 2013 at 22:1

A function like this should be added to the DomDocument class. – Motivity 24/8, 2014 at 15:26

I had to change the function declaration to expect a DOMElement instead of a DOMNode as I was passing the return from DOMDocument::getElementById(). Just in case it trips someone else up. – Backboard 4/10, 2014 at 22:8

Why do you loop through all the children? Couldn't you just saveHTML() on the $table? Look: PHP outerHTML S/O – Giltedged 1/6, 2015 at 6:32

This doesn't work. The error is "DOMDocument::saveHTML() expects exactly 0 parameters, 1 given" – Pinchcock 11/12, 2015 at 11:40

Notice: this does not return original, but little modified HTML, for example having 11 22 33 you will not get exact version. – Evans 12/10, 2022 at 7:56

Here is a version in a functional programming style:

function innerHTML($node) {
    return implode(array_map([$node->ownerDocument,"saveHTML"], 
                             iterator_to_array($node->childNodes)));
}

Dukes answered 28/8, 2016 at 16:38 Comment(0)

To return the html of an element, you can use C14N():

$dom = new DOMDocument();
$dom->loadHtml($html);
$x = new DOMXpath($dom);
foreach($x->query('//table') as $table){
    echo $table->C14N();
}

Cohette answered 13/5, 2016 at 19:25 Comment(3)

C14N will attempt to convert the HTML to a valid XML. For example will become – Bosomed 18/5, 2016 at 4:5

It's a dirty way of dump the HTML of the element, without having to use saveHTML that will output html, head and body tags. – Cohette 18/5, 2016 at 14:53

echo utf8_decode($table->C14N()); – Crine 21/9, 2022 at 16:38

A simplified version of Haim Evgi's answer:

<?php

function innerHTML(\DOMElement $element)
{
    $doc = $element->ownerDocument;

    $html = '';

    foreach ($element->childNodes as $node) {
        $html .= $doc->saveHTML($node);
    }

    return $html;
}

Example usage:

<?php

$doc = new \DOMDocument();
$doc->loadHTML("<body><div id='foo'><p>This is <b>an <i>example</i></b> paragraph<br>\n\ncontaining newlines.</p><p>This is another paragraph.</p></div></body>");

print innerHTML($doc->getElementById('foo'));

/*
<p>This is <b>an <i>example</i></b> paragraph<br>

containing newlines.</p>
<p>This is another paragraph.</p>
*/

There's no need to set preserveWhiteSpace or formatOutput.

Amagasaki answered 28/6, 2016 at 14:42 Comment(0)

In addition to trincot's nice version with array_map and implode but this time with array_reduce:

return array_reduce(
   iterator_to_array($node->childNodes),
   function ($carry, \DOMNode $child) {
        return $carry.$child->ownerDocument->saveHTML($child);
   }
);

Still don't understand, why there's no reduce() method which accepts arrays and iterators alike.

Saundra answered 5/10, 2016 at 8:21 Comment(0)

function setnodevalue($doc, $node, $newvalue){
  while($node->childNodes->length> 0){
    $node->removeChild($node->firstChild);
  }
  $fragment= $doc->createDocumentFragment();
  $fragment->preserveWhiteSpace= false;
  if(!empty($newvalue)){
    $fragment->appendXML(trim($newvalue));
    $nod= $doc->importNode($fragment, true);
    $node->appendChild($nod);
  }
}

Fine answered 5/6, 2014 at 18:55 Comment(1)

You do not need to pass the document to the function, you can use $node->ownerDocument. – Fetterlock 26/3, 2023 at 17:41

Here's another approach based on this comment by Drupella on php.net, that worked well for my project. It defines the innerHTML() by creating a new DOMDocument, importing and appending to it the target node, instead of explicitly iterating over child nodes.

InnerHTML

Let's define this helper function:

function innerHTML( \DOMNode $n, $include_target_tag = true ) {
  $doc = new \DOMDocument();
  $doc->appendChild( $doc->importNode( $n, true ) );
  $html = trim( $doc->saveHTML() );
  if ( $include_target_tag ) {
      return $html;
  }
  return preg_replace( '@^<' . $n->nodeName .'[^>]*>|</'. $n->nodeName .'>$@', '', $html );
}

where we can include/exclude the outer target tag through the second input argument.

Usage Example

Here we extract the inner HTML for a target tag given by the "first" id attribute:

$html = '<div id="first"><h1>Hello</h1></div><div id="second"><p>World!</p></div>';
$doc  = new \DOMDocument();
$doc->loadHTML( $html );
$node = $doc->getElementById( 'first' );

if ( $node instanceof \DOMNode ) {

    echo innerHTML( $node, true );
    // Output: <div id="first"><h1>Hello</h1></div>    

    echo innerHTML( $node, false );
    // Output: <h1>Hello</h1>
}

Live example:

http://sandbox.onlinephpfunctions.com/code/2714ea116aad9957c3c437d46134a1688e9133b8

Erminois answered 12/12, 2018 at 10:5 Comment(0)

Old query, but there is a built-in method to do that. Just pass the target node to DomDocument->saveHtml().

Full example:

$html = '<div><p>ciao questa è una <b>prova</b>.</p></div>';
$dom = new DomDocument($html);
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$node = $xpath->query('.//div/*'); // with * you get inner html without surrounding div tag; without * you get inner html with surrounding div tag
$innerHtml = $dom->saveHtml($node);
var_dump($innerHtml);

Output: ciao questa è una prova.

Curb answered 13/3, 2020 at 15:49 Comment(1)

Warning: DOMDocument::saveHTML() expects parameter 1 to be DOMNode, object given – Postmark 16/6, 2020 at 8:40

For people who want to get the HTML from XPath query, here is my version:

$xpath = new DOMXpath( $my_dom_object );

$DOMNodeList = $xpath->query('//div[contains(@class, "some_custom_class_in_html")]');

if( $DOMNodeList->count() > 0 ) {
    $page_html = $my_dom_object->saveHTML( $DOMNodeList->item(0) );
}

Defluxion answered 26/10, 2021 at 3:31 Comment(0)

innerHTML using C14N() and xpath query:


$node->C14N(
   true, // parse only xpath query nodes
   false, // without comments
   ["query" => ".//node()|.//*//@*"] // select all inner nodes & attributes
);

Rudelson answered 7/3, 2023 at 5:34 Comment(0)

Edit (PHP 8)

mb_convert_encoding with HTML-ENTITIES is deprecated in PHP 8.

function setInnerHTML($element, $content) {
    $DOMInnerHTML = new DOMDocument();
    $DOMInnerHTML->loadHTML(
        <<<HTML
        <html>
            <head>
                <meta charset="utf-8">
            </head>
            <body>
                $content
            </body>
        </html>
        HTML,
    );
    foreach (
        $DOMInnerHTML->getElementsByTagName('body')->item(0)->childNodes
        as $contentNode
    ) {
        $contentNode = $element->ownerDocument->importNode($contentNode, true);
        $element->appendChild($contentNode);
    }
}

Including an HTML boilerplate is probably the best way to achieve clean, UTF-8 encoded text within the added DOM nodes. I've tried creating a drop-in replacement for mb_convert_encoding with HTML-ENTITIES, but I always ended up with mojibake.

Original

After experimenting with some implementations I found here, I engineered the perfect solution that you can use to set inner HTML:

function setInnerHTML($element, $content) {
    $DOMInnerHTML = new DOMDocument();
    $DOMInnerHTML->loadHTML(
        mb_convert_encoding("<div>$content</div>", 'HTML-ENTITIES', 'UTF-8')
    );
    foreach (
        $DOMInnerHTML->getElementsByTagName('div')->item(0)->childNodes
        as $contentNode
    ) {
        $contentNode = $element->ownerDocument->importNode($contentNode, true);
        $element->appendChild($contentNode);
    }
}

Notes:

Because of the mb_convert_encoding function, this also requires the mbstring extension. If you omit the call here, this might cause mojibake.
This creates a <div> element to prevent creating an implicit  if there is no root element. This prevents problems when embedding into an element like <title>.
To not create a DocumentFragment, this fetches a DOMNodeList of the nodes, iterates through it, and appends each node to the element.
Ideally, setters should not return a value.

I created this to implement a basic templating system into a school project of mine.

Fetterlock answered 26/3, 2023 at 17:51 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

InnerHTML

Usage Example

Edit (PHP 8)

Original

Recommended topics

Hot tags