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

【问题标题】：How to insert many elements into DOM using PHP如何使用 PHP 将许多元素插入 DOM
【发布时间】：2012-09-09 08:19:33
【问题描述】：

把我的头发拉出来……

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

$a 从另一个类的函数返回给我。我需要将$b 插入$a，使$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 成为“二”的子代。但同时，“三”变成了“蓝”的孩子。 “green”和“yellow”保持原来的关系，但现在嵌套在“two”之下。

现实世界的例子....

<?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->query('//*[@id="input_4_5"]') 到达我想要开始工作的节点。从那里开始，我一直在使用带有 appendChild、replaceChild 和 insertBefore 变体的新 DOMElement 和 importNode 来尝试遍历 DOM 树。但坦率地说，即使我确实成功地遍历了它，我也无法弄清楚如何插入/附加我正在使用的大块代码。

【问题讨论】：

如果您正在使用dom，请考虑使用javascript
我考虑过 javascript，但我的所有变量都在服务器上，已设置好，不需要用户输入。所以我真的很想在服务器端这样做。
看看DOMDocument
您是否尝试过使用PHP Simple HTML DOM Parser？
@IonutFlaviusPogacian，我需要的一切都在服务器上，所以我没有试图证明将它移动到客户端管道进行处理。但是，我可能很快就会这样做。谢谢。

标签： php javascript dom

【解决方案1】：

我正在使用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;
?>

希望这会有所帮助。

【讨论】：

【解决方案2】：

检查下面的代码，我使用 php 和 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>

【讨论】：

【解决方案3】：

我觉得最好写一个新函数来获取a和b的数据，然后生成html。

【讨论】：

$a 来自另一个类的函数，我无法控制它。

【解决方案4】：

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

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

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

<script>

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

</script>

【讨论】：

【解决方案5】：

替换字符串会有帮助吗？

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

【讨论】：