如何使用PHP将许多元素插入DOM

时间:2012-09-17 05:55:35

标签: php javascript dom

把头发拉出来......

我需要使用PHP在两个不同的点处将一堆html插入到另一组html中。

$ a从另一个类的函数返回给我。我需要在$ a中插入$ b,使$ b元素成为$ a元素的父元素。

<?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>
';
?>

最终需要:

<?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>
';
?>

注意$ b是如何插入$ a的,将$ b的所有孩子都变为“2”。但与此同时,“三”成为“蓝色”的孩子。 “绿色”和“黄色”保持原有关系,但现在嵌套在“两个”下。

真实世界的例子......

<?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);

?>

我正在使用$ x-&gt; query('// * [@ id =“input_4_5”]')来到我想要开始处理的节点。从那里开始,我一直在使用新的DOMElement和importNode以及appendChild,replaceChild和insertBefore的变体来尝试遍历DOM树。但坦率地说,即使我成功遍历它,我也无法弄清楚如何插入/附加我正在使用的大块代码。

5 个答案:

答案 0 :(得分:5)

我正在使用SimpleHTMLDom解析器

试试这个:

<?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;
?>

希望这有帮助。

答案 1 :(得分:2)

检查以下代码,我使用过php&amp; jQuery用于生成输出。

<!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>

答案 2 :(得分:0)

我认为最好编写一个新函数来获取有关ab的数据,然后生成html。

答案 3 :(得分:0)

如果我必须这样做,我会做一个占位符,行/#/,然后在它上面做str_replace。

但是如果你真的需要使用DOM,请查看DOMDocument。

如果你想做Javascript在你的js中回应它们

<script>

var a = '<?php echo $a ?>';
var b = '<?php echo $b ?>':

</script>

答案 4 :(得分:-1)

更换字符串会有帮助吗?

$matched = array();
preg_match('/<div id="three">.*?<\/div>/', $a, $matched);
$b = preg_replace('/<div id="blue"><\/div>/', '<div id="blue">'.$matched[0].'</div>', $b);
$a = str_replace($matched[0], $b, $a);