Wrap all images with a div using DOMDocument

Asked
Active3 hr before
Viewed126 times

7 Answers

usingimages
90%

I have a large html document, with several images. I want to wrap all the images inside div.wrapped. How would I do this with DOMDocument?,I've seen the appendChild method, but that only appends elements at the end. How can I insert one in the middle, and then move the image inside it?, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Is there any kind of biological mechanism that would allow a species with a naturally short lifespan to live longer through cannibalism?

I never used DOMdocument before, but I think you mean something like this:

$html = <<<EOF
<html>
    <head>
        <title>:( -> :)</title>
    </head>
    <body>
        <img src="www.com" />
        <div class="random">
            <img src="www.ru" />
        </div>
    </body>
</html>
EOF;

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

//Create new wrapper div
$new_div = $dom->createElement('div');
$new_div->setAttribute('class','wrapper');

//Find all images
$images = $dom->getElementsByTagName('img');

//Iterate though images
foreach ($images AS $image) {
    //Clone our created div
    $new_div_clone = $new_div->cloneNode();
    //Replace image with this wrapper div
    $image->parentNode->replaceChild($new_div_clone,$image);
    //Append this image to wrapper div
    $new_div_clone->appendChild($image);
}
88%

I've seen the appendChild method, but that only appends elements at the end. How can I insert one in the middle, and then move the image inside it?,I have a large html document, with several images. I want to wrap all the images inside div.wrapped. How would I do this with DOMDocument?,I never used DOMdocument before, but I think you mean something like this:

I never used DOMdocument before, but I think you mean something like this:

$html = <<<EOF
<html>
    <head>
        <title>:( -> :)</title>
    </head>
    <body>
        <img src="www.com" />
        <div class="random">
            <img src="www.ru" />
        </div>
    </body>
</html>
EOF;

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

//Create new wrapper div
$new_div = $dom->createElement('div');
$new_div->setAttribute('class','wrapper');

//Find all images
$images = $dom->getElementsByTagName('img');

//Iterate though images
foreach ($images AS $image) {
    //Clone our created div
    $new_div_clone = $new_div->cloneNode();
    //Replace image with this wrapper div
    $image->parentNode->replaceChild($new_div_clone,$image);
    //Append this image to wrapper div
    $new_div_clone->appendChild($image);
}
72%

I have a large html document, with several images. I want to wrap all the images inside div.wrapped. How would I do this with DOMDocument?,I never used DOMdocument before, but I think you mean something like this:,I've seen the appendChild method, but that only appends elements at the end. How can I insert one in the middle, and then move the image inside it?,I am using a parser to change certain span elements to corresponding heading elements. I have the following code: It all works fine, but the spans are also wrap...

I never used DOMdocument before, but I think you mean something like this:

$html = <<<EOF
<html>
    <head>
        <title>:( -> :)</title>
    </head>
    <body>
        <img src="www.com" />
        <div>
            <img src="www.ru" />
        </div>
    </body>
</html>
EOF;

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

//Create new wrapper div
$new_div = $dom->createElement('div');
$new_div->setAttribute('class','wrapper');

//Find all images
$images = $dom->getElementsByTagName('img');

//Iterate though images
foreach ($images AS $image) {
    //Clone our created div
    $new_div_clone = $new_div->cloneNode();
    //Replace image with this wrapper div
    $image->parentNode->replaceChild($new_div_clone,$image);
    //Append this image to wrapper div
    $new_div_clone->appendChild($image);
}
65%

I have a large html document, with several images. I want to wrap all the images inside div.wrapped. How would I do this with DOMDocument?,I never used DOMdocument before, but I think you mean something like this:,Also see DOMDocument in php for an explanation of the node concept. It's crucial to understand when working with DOM.,ID's in HTML documents are generally unique, so the best solution would still be validating your document, if at all possible.

I never used DOMdocument before, but I think you mean something like this:

$html = <<<EOF
<html>
    <head>
        <title>:( -> :)</title>
    </head>
    <body>
        <img src="www.com" />
        <div class="random">
            <img src="www.ru" />
        </div>
    </body>
</html>
EOF;

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

//Create new wrapper div
$new_div = $dom->createElement('div');
$new_div->setAttribute('class','wrapper');

//Find all images
$images = $dom->getElementsByTagName('img');

//Iterate though images
foreach ($images AS $image) {
    //Clone our created div
    $new_div_clone = $new_div->cloneNode();
    //Replace image with this wrapper div
    $image->parentNode->replaceChild($new_div_clone,$image);
    //Append this image to wrapper div
    $new_div_clone->appendChild($image);
}
load more v
75%

Using .wrapAll(), we can insert an HTML structure around the inner <div> elements like so:,The new <div> element is created on the fly and added to the DOM. The result is a new <div> wrapped around all matched elements:,Description: Wrap an HTML structure around all elements in the set of matched elements., wrappingElement Type: Selector or htmlString or Element or jQuery A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.

<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>
load more v
40%

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).,<div>: The Content Division element,This element includes the global attributes.,<span> element for styling of phrasing content

<div>
   <p>Any kind of content here. Such as
      &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>
load more v
22%

To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.,If you use React with Web Components (which is uncommon), use the class attribute instead.,Some of the DOM attributes supported by React include:,You may also use custom attributes as long as they’re fully lowercase.

load more v

Other "using-images" queries related to "Wrap all images with a div using DOMDocument"