Find and replace an element in html using jquery

Question

I am trying to load a HTML page into a variable in Jquery, then replace a div element tag in it, so I can get my own id into the div. I am using this way to dynamically add more users in my web app, and then do a batch POST to the back end, and put the info into json.

Here is my html that I am loading.

info.html

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

I load this with jquery and I want to replace <div id="user"> with something

like <div id="user 1">

I have the following jquery script that has a counter to keep track of what number to append onto the div tag.

$(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.
        });

});

Any suggestions would be great thanks. Also, is the is the best way going about keeping track of how many times a new user is added(as in using a counter and keep track of how they are added, and then do the same when I click submit and create the json)?

<div id="user 1"> is not valid, <div id="user_1"> will

A. Wolff
– A. Wolff

2014-03-05 18:44:59 +00:00
Commented Mar 5, 2014 at 18:44 — A. Wolff
– A. Wolff, Commented Mar 5, 2014 at 18:44

Subash Selvaraj · Accepted Answer · 2014-03-05 19:12:39Z

2

.load() is asynchronous. make your changes in side callback.

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

Also $( "selector" ).load() is the syntax. So create a div and load content to it. // modified code structure

<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 

        });

});

edited Mar 5, 2014 at 19:12

answered Mar 5, 2014 at 18:45

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg Brown Over a year ago

The content = $("#content").html().replace('<div id="user ">','<div id="user "'+counter+'>'); didn't work, but when I used $("#content").attr("id", "user_" + counter); it worked, so thanks both of you.

Joseph Webber · Accepted Answer · 2014-03-05 19:14:06Z

1

Using JavaScript, you can use the .attr() method to target id, then set its value like so:

$("#content").attr("id", "user_" + counter);

answered Mar 5, 2014 at 19:14

Joseph Webber

2,1731 gold badge21 silver badges41 bronze badges

Comments

poxopox · Accepted Answer · 2014-03-05 19:22:01Z

0

Try an $.each() function for #user like this:

$('#user').each(function(indexNumber){
  $(this).replace('<div id="user'+indexNumber+'"></div>');
});

answered Mar 5, 2014 at 19:22

poxopox

1781 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Find and replace an element in html using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related