单击按钮时如何克隆html页面

如何在单击时在新的空白页中克隆html

btn\u更改\u文件夹\u样式\u分段

btn\u更改\u文件夹\u样式\u原始

然后内容将是

<img src="./pic/web_show/3_seg/01.jpg" alt="">
<img src="./pic/web_show/3_seg/02.jpg" alt="">

及

现在是完整代码

<img src="./pic/web_show/3/01.jpg" alt="">
<img src="./pic/web_show/3/02.jpg" alt="">
<img src="./pic/web_show/3/03.jpg" alt="">

<input type="button" id="btn_change_folder_style_seg" value="style seg"></input>
<input type="button" id="btn_change_folder_style_raw" value="style raw"></input>

<script>
    $(function() {
        $('#btn_change_folder_style_seg').click(function() {
            alert("style_seg")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_seg/');
            }
            });
        });
        $('#btn_change_folder_style_raw').click(function() {
            alert("style_raw")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_raw/');
            }
            });
        });
    })
</script>

$（函数（）{
$（“#btn_change_folder_style_seg”）。单击（函数（）{
警报（“样式间隔”）
var imagePath=$（'img'）；
attr（'src'，函数（索引，attr）{
如果（属性）{
返回属性替换（'3/'，索引+1+'_seg/'）；
}
});
});
$（“#btn_change_folder_style_raw”）。单击（函数（）{
警报（“原始样式”）
var imagePath=$（'img'）；
attr（'src'，函数（索引，attr）{
如果（属性）{
返回属性替换（'3/'，索引+1+'_raw/'）；
}
});
});
})

首先，您需要选择HTML标记，然后通过cloneNode（true）方法对其进行复制，您必须添加true以复制其子项

然后，您可以根据需要编辑克隆的HTML（删除elm-编辑elm等）

因此，必须通过（.outerHTML）将其转换为字符串

之后，您必须创建Blob对象的新实例，并在其中附加字符串化的内容，并添加文件的类型

const file=new Blob（[content]，{type:'text/html'}）

然后，您将需要锚定标记来创建HTML文件的下载链接

a、 href=URL.createObjectURL（文件）

然后，如果单击按钮标记，则触发要单击的锚标记

这就是我所希望的，这个片段能更清楚地说明我的答案

//选择按钮
const btn=document.getElementById（'btn'）；
//添加单击事件
btn.addEventListener（'单击'，（）=>{
//选择锚点
常量a=document.getElementById（'a'）；
//选择html标记
const html=document.querySelector（'html'）；
//克隆html
const clonedHtml=html.cloneNode（true）；
//选择元素
const body=clonedHtml.querySelector（'body'）；
//擦去尸体
body.innerHTML=''；
//创建div
const div=document.createElement（'div'）；
//添加文本
div.innerText='new div'；
//追加div
正文.附加（div）；
//*附加到内容
让内容=``；
content+=clonedHtml.outerHTML；
控制台日志（内容）；
//创建HTML文件
let file=new Blob（[content]{
键入：“text/html”
});
//添加href链接
a、 href=URL.createObjectURL（文件）；
//名称文件
a、 下载='New.html'；
//点击运行
a、 单击（）；
});
1
2.
生成HTML文件
你所说的“克隆html页面”是什么意思？您只需在新窗口/选项卡中打开同一页即可。请澄清。是的，但新页面内容必须更改。如果大部分内容保持不变，为什么要更改页面？那么，atag与此有什么关系呢？创建一个新的html页面，复制并粘贴代码，只需更改内容
<img src="./pic/web_show/3/01.jpg" alt="">
<img src="./pic/web_show/3/02.jpg" alt="">
<img src="./pic/web_show/3/03.jpg" alt="">

<input type="button" id="btn_change_folder_style_seg" value="style seg"></input>
<input type="button" id="btn_change_folder_style_raw" value="style raw"></input>

<script>
    $(function() {
        $('#btn_change_folder_style_seg').click(function() {
            alert("style_seg")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_seg/');
            }
            });
        });
        $('#btn_change_folder_style_raw').click(function() {
            alert("style_raw")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_raw/');
            }
            });
        });
    })
</script>