Question

问：根据任务，我只需要使用<p> h4替换首次出现的HTML DOM代码。

我使用this question尝试但不能成功

我的代码，

HTML

<div class="productabcont">
    <div class="protabtop">
        <div class="protabtopright">
            <p>Combed compact yarn</p> <!-- This i want to replace with <h4> tag. -->
            <p>Description line 1</p>
            <p>Description line 2</p>
        </div>
    </div>          
</div>

PHP

<?php    
    $dom = new DOMDocument();
    $dom->loadHTML($myHTML);
    $dom->getElementsByTagName('p')[0]->outertext = '<h4>'.$value.'</h4>';
    $dom->saveHTML();
?>

所需输出

<div class="productabcont">
    <div class="protabtop">
        <div class="protabtopright">
            <h4>Combed compact yarn</h4> <!-- This is replaced with <p> tag. -->
            <p>Description line 1</p>
            <p>Description line 2</p>
        </div>
    </div>          
</div>

提前致谢。

Answer 1

使用outerHTML个对象时没有DOM*。但您可以使用所有其他可用工具。

例如：

<?php

$html = <<<HTML
<div class="productabcont">
    <div class="protabtop">
        <div class="protabtopright">
            <p>Combed compact yarn</p> <!-- This i want to replace with <h4> tag. -->
            <p>Description line 1</p>
            <p>Description line 2</p>
        </div>
    </div>          
</div>
HTML;

$value = 'some headline';

$dom = new DOMDocument();
$dom->loadHTML($html);

$q = new DOMXPath($dom);

// find first p tag
foreach ($q->query('//p[1]') as $p) {
    // replace it with newly created element
    $p->parentNode->replaceChild($dom->createElement('h4', $value), $p);
}

echo $dom->saveHTML();

当然，您不需要使用xpath这样一个简单的示例，但如果您稍后需要更明确地说明需要替换哪个节点，则可以轻松扩展。

演示：https://3v4l.org/4Hj1e

Answer 2

通过使用选择器和jQuery方法，您可以使用DOM。

请检查：jsfiddle

var firstText = $(".protabtopright p:first").text();
$(".protabtopright p:first").replaceWith("<h4>" + firstText + "</h4>");

使用HTML DOM替换第一个<p>标记

2 个答案: