Question

我想从服务器加载一些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>

test2.html

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

Answer 1

第一个问题是尝试定位段落的val()方法。这不会做任何事情，因为它没有val属性可以返回。您需要使用text或html来替换内容。

其次，首先使用$(data)将HTML字符串转换为DOM树（请参阅下面的注释，了解为什么我使用虚拟div和html()代替），然后找到元素，更改它等等将新树附加到目标：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/NWj62/1/

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);
    //});
});

您需要将传入的HTML包装在虚拟div中，因为find将与树的顶部元素不匹配。

我替换了虚拟数据，因此您可以看到它在没有ajax调用的情况下工作。

注意：$(htmlstring)会将html和body标签折叠成比您预期的更平坦的结构，但您的示例只有段落，所以很好。

您的代码将类似于：

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

Answer 2

您需要某种模板功能，因为从服务器获取HTML并将其转换为DOM树然后手动应用操作会导致大量代码重复。此外，进行动态树操作也相对昂贵。

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

后端模板：取决于你的后端框架（即Django有自己的模板模块）。
前端模板：您可以使用Underscore模板或Handlebars模板（更类似于Django模板）。

在插入之前处理html字符串

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/NWj62/1/

您的代码将类似于：