如何将节点内容从xml复制到硬编码的html（动态到原始的html）？

Question

I have about 150 pages of html with 4 divs on each page featuring similar portfolio items... I currently have these item's content being loaded via jQuery, using custom data attributes on each item divs. I'm trying to make this dynamic data static using either php or jquery, so that the content becomes hardcoded into the html of each page.... The website is in html format and not wordpress/php ...

The code is given below:

var xmlData = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><item><p_id>1_1</p_id><p_title>Sparrow</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Sparrow</p_img><p_url>1_sparrow.html</p_url></item><item><p_id>1_2</p_id><p_title>Eagle</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Eagle</p_img><p_url>1_eagle.html</p_url></item><item><p_id>1_3</p_id><p_title>Hen</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Hen</p_img><p_url>1_hen.html</p_url></item><item><p_id>2_1</p_id><p_title>Green</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Green</p_img><p_url>2_green.html</p_url></item><item><p_id>2_2</p_id><p_title>Blue</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Blue</p_img><p_url>2_blue.html</p_url></item><item><p_id>2_3</p_id><p_title>Pink</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Pink</p_img><p_url>2_pink.html</p_url></item><item><p_id>2_4</p_id><p_title>Purple</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Purple</p_img><p_url>2_purple.html</p_url></item></items>';

$(document).ready(function(){
    parse(xmlData);
});


function parse(xmlResponse){
    
    $(xmlResponse).find("item").each(function() {
        var pr_id = $(this).find("p_id").text();
        var p_title = $(this).find("p_title").text();
        var p_img = $(this).find("p_img").text();
        var p_url = $(this).find("p_url").text();
        
        $("a[data-prd_id='" + pr_id + "']").attr('href', p_url);
        $("a[data-prd_id='" + pr_id + "'] img").attr('src', p_img);
        $("a[data-prd_id='" + pr_id + "'] h2").text(p_title);
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div class="item">
<a class="item-anchor" data-prd_id="1_2" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="2_2" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="1_3" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="2_4" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>
    
</div>

::: JSfiddle :::

I know about Simple PHP HTML DOM, and have used it quite some times to copy data to html files.. Here's an example code from my scripts folder that I've used. In this example, I placed my html files with content in the /content folder of my xampp, and the files where the string (_Item__Features__Content__HERE_) is placed are html files with same name but the actual website pages, and were kept in the /website_files_html folder. Finally after the string is replaced, the new version of the html files are saved in the /extracted_html folder...

include('simple_html_dom.php');

$destdir = "extracted_html";
$oldMessage = "_Item__Features__Content__HERE_";


$website_files_html_dir = "website_files_html";

$dir = new DirectoryIterator("content_html");
foreach ($dir as $fileinfo)
        {
    if (!$fileinfo->isDot())
                {
                $file_name = basename($fileinfo);
                $html = file_get_html("content_html/$file_name");
                foreach($html->find('div[class=item_features]') as $e)
                        {
                        $str=file_get_contents("$website_files_html_dir/$file_name");
                        $str=str_replace($oldMessage, $e->innertext,$str);
                        file_put_contents("$destdir/$file_name", $str);
                        echo $file_name . " <b>Done!</b> </br>";
                        }
                }

        }

So my Request is: How can I modify this code to let me place the respective xml content in each "item" div's attributes (href, img-src, title), and output the result as html files in the extracted folder?

Thanks for any help.

</div>

Answer 1

Well, I figured it out! Had to search for XML Parser. Here's the code.

<?php
include('simple_html_dom.php');

$destdir = "extracted_html";

$dir = new DirectoryIterator("content_html");
foreach ($dir as $fileinfo)
        {
    if (!$fileinfo->isDot())
                {
                $file_name = basename($fileinfo);
                $html = file_get_html("content_html/$file_name", NULL, NULL, NULL, NULL, NULL, NULL, NULL, false, NULL, NULL);              
                foreach($html->find('a[class=w-portfolio-item-anchor]') as $e)
                        {
                        $product_this_arr = array();
                        $data_id = $e->data_prd_id;
                        //echo $data_id . '<br>';
                        $product_this_arr = get_xml_data($data_id);

                        $e->href = $product_this_arr[0];
                        $e->find('img', 0)->src = $product_this_arr[1];
                        $e->find('h2', 0)->innertext = $product_this_arr[2];

                        $e->data_prd_id = "__attribute_Nulled_";

                        }
                        file_put_contents("$destdir/$file_name", $html);
                        echo $file_name . " <b>Done!</b> </br>";
                }
        }

    // XML PARSER...
    function get_xml_data($xml_id_i){
    $product_xml = simplexml_load_file('xml/XML_products_info.xml');
        $product_each_arr = array();
       foreach ($product_xml as $product_each){
        if($product_each->product_id == $xml_id_i){
         $product_each_arr[0] = $product_each->product_url;
         $product_each_arr[1] = $product_each->product_img;
         $product_each_arr[2] = $product_each->product_title;
        }
       }
    return $product_each_arr;
    }

?>