process html string before insertion

Question

I want to load some html from server, I store the loaded html in a string then I want to modify the values of certain tags and elements within that string before appending it : here is how I'm trying to do it :

script of 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>

And the problem you're having is.....?

j08691
– j08691

2014-07-16 16:04:55 +00:00
Commented Jul 16, 2014 at 16:04 — j08691
– j08691, Commented Jul 16, 2014 at 16:04

iCollect.it Ltd · Accepted Answer · 2014-07-16 16:23:23Z

1

The first problem is trying to target the val() method of a paragraph. That will not do anything as it has no val property to return. You need to use text or html to replace the content.

Second, convert the HTML string to a DOM tree first with $(data) (see notes below as to why I use a dummy div and html() instead), then find the element, change it etc then append the new tree to the target:

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

You need to wrap the incoming HTML in a dummy div as find will not match the top element of the tree.

I substituted dummy data so you could see it working without the ajax call.

Note: $(htmlstring) will collapse html and body tags into a flatter structure than you might expect, but your example only has the paragraph so is fine.

Your code will be something like:

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

edited Jul 16, 2014 at 16:23

answered Jul 16, 2014 at 16:17

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

2 Comments

Tarik Mokafih Over a year ago

thank you, but The purpose is to do it for a more complex html file with many divs and ids, this one was just an example

iCollect.it Ltd Over a year ago

@Tarik Mokafih: The same pattern applies to any number of changes. $html.find("something").html("somethingelse") etc You show me more change, I will show you more examples... We can only work with what we are shown :)

AlexandruB · Accepted Answer · 2014-07-16 16:36:55Z

0

You want some sort of template functionality, since getting HTML from server and transforming it into a DOM tree and then applying manipulations manually is a lot of code repetition for nothing. Also, it's relatively expensive to do dynamic tree manipalations.

Either the html is processed on the server or on the client side, is your choice.

Backend templates: depends on your backend framework (ie. Django has its own template module).
Fronted templates: You can use Underscore templates or Handlebars templates (more similar to Django templates).

answered Jul 16, 2014 at 16:36

AlexandruB

6883 silver badges15 bronze badges

Collectives™ on Stack Overflow

process html string before insertion

2 Answers 2

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

Your code will be something like:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

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

Your code will be something like:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related