使用Javascript或jQuery更改html源代码，然后将更改后的源代码显示在文本区域中

我正在处理一个简单的项目，该项目需要使用一些逻辑修改html源代码，然后在单击按钮时将修改后的html源代码显示到一个div中

修改前的输出是我单击ShowHTML时的输出

当我单击ShowConvertedHTML时，输出如下

我基本上想对内部子节点进行修改，不管子节点的深度如何。此处发生的情况是在单个级别上进行修改，即消除了span和h1标记

显示html按钮显示外部html文件的内容，而不是页面的源代码。转换外部html文件源代码的代码如下

函数convertHtml（）{
$body=$（“#demo”）.text（）；
$fakediv=$（“”）；
$fakediv.html（$body）；
$fakediv.children（）.each（函数（）{
$thistText=$（this.text（）；
如果（$thisText）
$（this.text（“@”+$thisttext+“@”）
});
$（“#demo”）.text（$fakediv.prop（“outerHTML”）；//用转换后的html字符串填充div
}
//文档已准备好执行JS
$（文档）.ready（函数（）{
$（“#转换”）。单击（函数（）{
//警报（$（“#演示”）.text（）；
转换HTML（）；
}); 
});

检查这把小提琴，它能满足你的需要

$（“#目标”）。单击（函数（）{
$（'h1'）.html（“你好”）；
});

这是需要更改的
在这里，点击一个按钮，转换后的html将出现在文本框中，JS被注释，如果需要帮助，请告诉我


$（“#转换”）。单击（函数（）{///单击转换按钮
$body=$（“body”）.prop（“outerHTML”）；//获取一个body内容字符串
$fakediv=$（“”）；//制作一个假div将该字符串放入其中
$fakediv.html（$body）；//将body复制到我们的假div
$fakediv.children（）.not（“#convert，#output”）.each（function（）{//用于复制版本的每个子级
$thistText=$（this.text（）；//获取它们内部的任何文本
如果（$thisText）
$（this.text（“@”+$thisttext++”）//并替换它
});
$（“#输出”）.text（$fakediv.prop（“outerHTML”）；//用转换后的html字符串填充文本
})

你好
大家好！
可爱的女士
转换
共享您的代码，我们将帮助您查看
jQuery（）.text（）
<代码>$（“*”）.each（函数（）{$（this.text（“@”+$（this.text（）+“@”）}）示例不会对嵌套元素产生完全想要的效果。是的，我这样做了，但那只会修改DOM元素的内容，但我希望修改后的源代码是我在文章中提到的。html文件的结构应该是modified@AbhishekSingh你之前的编辑更清晰，我想你应该把代码放回去。嗨，这个答案对你来说没问题吗？不，正如我提到的，我不需要html页面的预期输出，而我想修改源代码，修改后的源代码应该在单击按钮时显示。