javascript - 使用 jquery 查找和替换 html 中的元素

Question

我试图将一个 HTML 页面加载到 Jquery 中的一个变量中，然后替换其中的一个 div 元素标记，这样我就可以将我自己的 id 放入 div 中。我正在使用这种方式在我的网络应用程序中动态添加更多用户，然后批量 POST 到后端，并将信息放入 json 中。

这是我正在加载的 html。

信息.html

 <div id="user">
     <label>name</label>
     <input type="text" name="name">
     <br>
     <label>email</label>
     <input type="text" name="email">
      <br>
 </div>

我用 jquery 加载它，我想替换 <div id="user">有东西

喜欢<div id="user 1">

我有以下 jquery 脚本，它有一个计数器来跟踪要附加到 div 标记上的数字。

$(document).ready(function(){
    var make_counter = (function(){
        var count = 0;
        return function(){
            count++;
            return count;
        };
    });
    var _counter = make_counter();
    $("#add").click(function(){
        var counter = _counter();
        var content = $('<div>').load("static/info.html"); //using python flask 
        console.log(typeof(content)); //is of object type
        console.log(typeof(content.html())); //is of type string
        console.log(content.html());//shows up as an empty string
        console.log(content);//prints out the object
        content = content.html().replace('<div id="user ">','<div id="user "'+counter+'>'); // doesn't work. 
        $("#add_div").append(content); //appends correctly if I remove the above line, but all divs have the some id.
        });

});

如有任何建议，将不胜感激。此外，这是跟踪新用户添加次数的最佳方法吗(如使用计数器并跟踪它们的添加方式，然后在我单击提交并创建 json 时执行相同操作) ？

Answer 1

.load() 是异步的。在侧回调中进行更改。

.load("..",function(){
// your changes
});

$( "selector").load() 也是语法。因此，创建一个 div 并向其加载内容。//修改后的代码结构

<div id"content"></div>

$(document).ready(function(){
    var make_counter = (function(){
        var count = 0;
        return function(){
            count++;
            return count;
        };
    });
    var _counter = make_counter();
    $("#add").click(function(){
        var counter = _counter();
        $("#content").load("static/info.html",function(){
             content = $("#content").html().replace('<div id="user ">','<div id="user "'+counter+'>');  
             $("#add_div").append(content); 
}); //using python flask 

        });

});