Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert many elements into DOM using PHP

Pulling my hair out here...

I need to insert a bunch of html into another set set of html at two distinct points, using PHP.

$a is returned to me from another class's function. I need to insert $b into $a, making the $b elements the parent of some of $a's elements.

<?php
$a = '
<div id="one">
    <div id="two">
        <div id="three">Hi</div>
    </div>
</div> 
';

$b = '
<div id="red">
    <div id="blue"></div>
</div>
<div id="green">
    <div id="yellow">there</div>
</div>
';
?>

Need to end up with:

<?php
$c = '
<div id="one">
    <div id="two">
        <div id="red">
            <div id="blue">
                <div id="three">Hi</div>
            </div>
        </div>
        <div id="green">
            <div id="yellow">there</div>
        </div>
    </div>
</div>
';
?>

Note how $b is inserted into $a, making all of $b a child to "two". But at the same time, "three" becomes a child of "blue". "green" and "yellow" maintain their original relationship, but are now nested under "two".

Real world example....

<?php
$a = '
<div class="ginput_complex ginput_container">
    <span class="ginput_full">
            <input name="input_5" id="input_4_5" type="file" value="" class="medium" tabindex="5">
            <label for="input_4_5" class="ginput_post_image_file">File</label>
    </span>
    <span class="ginput_full ginput_post_image_title">
            <input type="text" name="input_5.1" id="input_4_5_1" value="" tabindex="6">
            <label for="input_4_5_1">Title</label>
    </span>
    <span class="ginput_full ginput_post_image_caption">
            <input type="text" name="input_5.4" id="input_4_5_4" value="" tabindex="7">
            <label for="input_4_5_4">Caption</label>
    </span>
    <span class="ginput_full ginput_post_image_description">
            <input type="text" name="input_5.7" id="input_4_5_7" value="" tabindex="8">
            <label for="input_4_5_7">Description</label>
    </span>
</div>
';


$b =
'
<div class="container">
    <div class="row fileupload-buttonbar">
        <div class="span7">
            <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>

            {{{{{{{{ THIS IS WHERE I MY FILE INPUT SHOULD GO }}}}}}}}}}}

            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
        </div>
    </div>
</div>
';

$doc = new DOMDocument;
$doc->loadHTML($a);
$x = new DOMXPath($doc);

?>

I'm using $x->query('//*[@id="input_4_5"]') to get to the node I want to start working on. And from there, I've been using new DOMElement and importNode with variations of appendChild, replaceChild, and insertBefore to try an traverse the DOM tree. But frankly, even if I did traverse it successfully, I can't figure out how to insert/append the large blocks of code that I'm working with.

like image 201
xd3v Avatar asked Dec 18 '25 03:12

xd3v


2 Answers

I am using the SimpleHTMLDom parser

Try this:

<?php
require_once( 'simple_html_dom.php' );

$a = '
<div id="one">
    <div id="two">
        <div id="three">Hi</div>
    </div>
</div> 
';

$b = '
<div id="red">
    <div id="blue"></div>
</div>
<div id="green">
    <div id="yellow">there</div>
</div>
';

$a = str_get_html( $a );
$c = str_get_html( $b );

$c->find( 'div[id=blue]', 0 )->innertext = $a->find( 'div[id=two]', 0 )->innertext;
$a->find( 'div[id=two]', 0 )->innertext = $c->save();

echo $a;
?>

Hope this helps.

like image 190
web-nomad Avatar answered Dec 20 '25 18:12

web-nomad


Check below code, i have used php & jQuery for generation of output.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
</head>

<body>
<div id="varA" style="display:none">
<?
    echo $a= '<div id="one">
    <div id="two">
        <div id="three">Hi</div>
    </div>
</div>';
?>
</div>
<div id="varB" style="display:none">
<?
    echo $b = '
<div id="red">
    <div id="blue"></div>
</div>
<div id="green">
    <div id="yellow">there</div>
</div>
';
?>
</div>

<span id="output"></span>

<script language="javascript">
alert('varA id have:'+$('#varA').html());
var middle = $('#two').html();
$('#output').html($('#varA').html());
$('#varA').remove();
alert('varB id have:'+$('#varB').html());
$('#two').html($('#varB').html());
$('#varB').remove();
$('#blue').html(middle);
alert('output id have:'+$('#output').html());
</script>

</body>
</html>
like image 34
VibhaJ Avatar answered Dec 20 '25 19:12

VibhaJ



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!