Question

所以我已经有一段时间了，而且我得到的最好的是将图像包裹在一个链接中，并在图像标记后面加上一个跨度：

<a href="">
  <img src="">
  <span></span>
</a>

但我想要的是：

<a href="">
  <span></span>
  <img src="">
</a>

我尝试了各种各样的变量和

的位置

$img->parentNode->appendChild($dom->createElement('span'), $img);

和insertBefore（）在我的代码中的各种地方的使用，我完全没有想法，因为我是相当新的php DOM的东西。我的消息来源：

foreach($dom->getElementsByTagName('img') as $img)
{
$fancyHref = $dom->createElement('a');

                        $clone = $fancyHref->cloneNode();
                        $img->parentNode->replaceChild($clone, $img);
                        $clone->appendChild($img);  
                        $img->parentNode->appendChild($dom->createElement('span'));
};

更新澄清我的目标：我在html中有一个img标签。在它通过php dom之后，我想在图像标记之前将img标记包含在带有span标记的标记中：

之前

<img src="" />

后

<a href="">
   <span class=""></span>
   <img src="" />
</a>

目前我的代码（没有跨度）

foreach($dom->getElementsByTagName('img') as $img)
            {               
                $src = $img->getAttribute('src');
                $filename = substr(strrchr($src , '/') ,1); 
                $filename = preg_replace('/^[.]*/', '', $filename);
                $filename = explode('.', $filename); 
                $filename = $filename[0];

                if($this->imagesTitles[$this->currentLanguage][$filename] !== '')
                {
                    $img->setAttribute('title', $this->imagesTitles[$this->currentLanguage][$filename]);
                    $img->setAttribute('alt', $this->imagesTitles[$this->currentLanguage][$filename]);
                }
                else
                {
                    $img->removeAttribute('title');
                    $img->removeAttribute('alt');
                }

                $classes = explode(' ', $img->getAttribute('class'));
                if(!in_array('no-enlarge', $classes))
                {
                    $fancyHref = $dom->createElement('a');
                    $span = $dom->createElement('span');
                    $span->setAttribute('class', 'magnifier');
                    $fancyHref->setAttribute('class', 'enlarge');
                    $fancyHref->setAttribute('rel', 'enlarge');
                    $fancyHref->setAttribute('href', $img->getAttribute('src'));
                    if($img->getAttribute('title') !== '')
                    {
                        $fancyHref->setAttribute('title', $img->getAttribute('title'));
                        $fancyHref->setAttribute('alt', $img->getAttribute('title'));
                    }
                    $clone = $fancyHref->cloneNode();

                    $img->parentNode->replaceChild($clone, $img);   
                    $clone->appendChild($img);
                    $img->parentNode->insertBefore($span, $img);                        
                }

                $img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class'))));

                if($img->getAttribute('class') === '')
                {
                    $img->removeAttribute('class');
                }
            }

Answer 1

您可以使用DOMNode->insertBefore()方法（docs）。它的格式为$parentNode->insertBefore( $nodeToBeInserted, $nodeToInsertBefore )。你的代码是：

$img->parentNode->insertBefore( $dom->createElement('span'), $img );

DOMNode->appendChild()（docs）只有1个参数（插入的节点），并且该节点将始终在最后一个childNode之后插入。

编辑：

我现在已经测试了我的代码，如果你在测试用例中用我的行替换$img->parentNode->appendChild($dom->createElement('span'));，它将以正确的格式结束。然而，你正在以一种非常混乱的方式操纵元素。除此之外，如果我测试你更新的代码，我要么得到你想要的格式，要么根本没有span元素......

要替换的元素是图像，因为这是文档中最初的唯一元素。因此，您应该克隆-that-元素。虽然您当前的代码消除了层次结构错误，但您正在复制所有已更改的代码，而不仅仅是冲突的元素，这会浪费内存和时间。复制冲突元素时，很容易。您可以按照希望它们显示的顺序将元素附加到a。附加图像时，请添加克隆。不要操纵$img。如果需要操作图像，则必须操纵克隆。然后，您只需将$img替换为您操作的元素（在您的情况下为$fancyHref）。

$html = '<img src="">';
$dom = new DOMDocument();
$dom->loadHTML($html);

foreach($dom->getElementsByTagName('img') as $img) {
  $fancyHref = $dom->createElement('a');
  $clone = $img->cloneNode();
  $span = $dom->createElement( 'span' );
  #... do whatever you need to do to this span, the clone and the a element ...

  #... when you are done, you can simply append all elements you have been manipulating ...
  $fancyHref->appendChild( $span );
  $fancyHref->appendChild( $clone );

  $img->parentNode->replaceChild( $fancyHref, $img );
};

echo $dom->saveHTML();

Answer 2

嗯。我知道这可能不会归类为答案，但你不是已经拥有它了吗？我的意思是......我试过你的代码：

$dom = new DOMDocument;
$dom->loadHTMLFile("data.html");

foreach($dom->getElementsByTagName('img') as $img){
    $src = $img->getAttribute('src');

    $filename = substr(strrchr($src , '/') ,1);
    $filename = preg_replace('/^[.]*/', '', $filename);
    $filename = explode('.', $filename);
    $filename = $filename[0];

    $classes = explode(' ', $img->getAttribute('class'));

    if(!in_array('no-enlarge', $classes))
    {
        $fancyHref = $dom->createElement('a');
        $span = $dom->createElement('span');
        $span->setAttribute('class', 'magnifier');
        $fancyHref->setAttribute('class', 'enlarge');
        $fancyHref->setAttribute('rel', 'enlarge');
        $fancyHref->setAttribute('href', $img->getAttribute('src'));
        if($img->getAttribute('title') !== '')
        {
            $fancyHref->setAttribute('title', $img->getAttribute('title'));
            $fancyHref->setAttribute('alt', $img->getAttribute('title'));
        }
        $clone = $fancyHref->cloneNode();

        $img->parentNode->replaceChild($clone, $img);
        $clone->appendChild($img);
        $img->parentNode->insertBefore($span, $img);
    }

    $img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class'))));

    if($img->getAttribute('class') === ''){
        $img->removeAttribute('class');
    }
}

echo "<pre>" . htmlentities($dom->saveHTML()) . "</pre>";

将此（ data.html ）作为源数据：

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits">
    </body>
</html>

结果如下：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a class="enlarge" rel="enlarge" href="http://lorempixel.com/g/400/200/" title="tits" alt="tits">
            <span class="magnifier">
            </span>
            <img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits"></a>
    </body>
</html>

那么..这不是你想要的吗？：d

PHP dom在链接中包装图像并在图像标记之前添加span

2 个答案: