Javascript 在插入之前处理html字符串_Javascript_Jquery_Html

Javascript 在插入之前处理html字符串

javascript jquery html

Javascript 在插入之前处理html字符串,javascript,jquery,html,Javascript,Jquery,Html,我想从服务器加载一些html，我将加载的html存储在一个字符串中，然后我想在附加它之前修改该字符串中某些标记和元素的值：以下是我试图做到这一点的方式： test1.html的脚本： <head>....</head> <body> <div id="main"></div></body> <script> $(document).ready(function(){ $.get("tes

我想从服务器加载一些html，我将加载的html存储在一个字符串中，然后我想在附加它之前修改该字符串中某些标记和元素的值：以下是我试图做到这一点的方式：

test1.html的脚本：

<head>....</head>
<body> <div id="main"></div></body>
<script>
    $(document).ready(function(){
        $.get("test2.html").done(function(data){
            $("#rf", data).val("new value");
            $("#main").append(data);
        });
        });
</script>

。。。。
$（文档）.ready（函数（）{
$.get（“test2.html”）.done（函数（数据）{
$（“#rf”，数据）.val（“新值”）；
$（“#main”）。追加（数据）；
});
});

test2.html

<p id="rf"> <b>old value</b></p>

旧值

第一个问题是试图针对段落的

val（）

方法。它不会做任何事情，因为它没有要返回的

val

属性。您需要使用

text

或

html

替换内容

其次，首先使用

$（数据）

将HTML字符串转换为DOM树（请参见下面的注释，了解我为什么使用虚拟div和

HTML（）

），然后找到元素，更改它，等等，然后将新树附加到目标：

JSFiddle：

您需要某种类型的模板功能，因为从服务器获取HTML并将其转换为DOM树，然后手动应用操作需要大量代码重复。另外，进行动态树修剪的成本相对较高

您可以选择在服务器端或客户端处理html

后端模板：取决于您的后端框架（即Django有自己的模板模块）
正面模板：可以使用下划线模板或把手模板（更类似于Django模板）

您遇到的问题是……？谢谢，但目的是为了处理一个包含许多div和id的更复杂的html文件，这只是一个简单的例子example@TarikMokafih：相同的模式适用于任何数量的更改<代码>$html.find（“something”）.html（“somethingelse”）等如果你给我看更多的变化，我会给你看更多的例子。。。我们只能使用显示的内容：）

var html = '<p id="rf"> <b>old value</b></p>'

$(document).ready(function () {
    var $html = $("<div>").html(html);
    $html.find("#rf").html("new value");
    $("#main").append($html);
    //$.get("test2.html").done(function(data){
    //    $("#rf", data).val("new value");
    //    $("#main").append(data);
    //});
});

$(document).ready(function () {
    $.get("test2.html").done(function(data){
        var $html = $("<div>").html(data);
        $html.find("#rf").html("new value");
        $("#main").append($html);
    });
});