在插入前处理HTML字符串

process html string before insertion

本文关键字：字符串 HTML 前处理 插入      更新时间：2023-09-26

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

第一个问题是试图针对段落的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);
    });
});

您需要某种模板功能，因为从服务器获取HTML并将其转换为DOM树，然后手动应用操作是大量的代码重复，而没有任何意义。而且，执行动态树操作的成本相对较高。

html是在服务器端处理还是在客户端处理，由你选择。

  • 后端模板:取决于你的后端框架(即。Django有自己的模板模块)。
  • 前端模板:你可以使用下划线模板或把手模板(更类似于Django模板)。
相关文章：