jQuery Strange behavior using .html() and .empty()

Question

I'm having some weird behavior from my jQuery. I am running jQuery 1.10.2 from google's ajax api.

According to the jQuery documentation the .html() function is supposed to call the function .empty() before inserting the text. My problem is that I have a div container with a unique id and when I insert text using the .html() function the default text is cleared and my desired text is inserted, which is supposed to happen.

<div id="xmlContent">
    this is a test <!-- Default Text -->
</div>

But if I click my "add text button" again the new text is just appended to the previously generated content instead of replacing it. Further still if I keep clicking on the button the new content nests within the first child element.

<div id="xmlContent">
    <code>
        &lt;code&gt;
            &lt;name&gt;fred<br>
        <address></address><br>
        <issitelocation></issitelocation><br>
    </code>
    <name>fred</name><br>
    <address>addres</address><br>
    <issitelocation></issitelocation><br>
</div>

On a related topic, .empty() clears the default text, but refuses to clear any generated content.

I have the code in a jsfiddle right here here.

Also the code is here

function generateXML() {
    xmlHTML += '<name>' + $('#locationName').val() + '</name><br />';
    xmlHTML += '<address>' + $('#address').val() + '</address><br />';
    xmlHTML += '<isSiteLocation>' + $('#isPathwaySite').val() + '</isSiteLocation><br />';
    xmlHTML = xmlHTML.replace('<','&lt;').replace('>','&gt;');
    xmlHTML = '<code>'+xmlHTML+'</code>';
}


function populateXMLContainer() {
    $('#xmlContent').html(xmlHTML);
}

$(function() {
    $('#generateXML').click(function() {
        generateXML();
        populateXMLContainer();
    });
});

Please help, I have no idea what I'm doing wrong.

Clarifying Note The reason for the < and the > is because I'm trying to create an xml generator for myself.

Just set xmlHTML = '' in the first line of generateXML method.. Since var xmlHTML is being shared , it holds the previous values that is being appended in the first line — Sushanth --
– Sushanth --, Commented Jul 19, 2013 at 20:51

Avitus · Accepted Answer · 2013-07-19 20:50:56Z

2

It's because the first line of the function generateXML is doing a concatenation of what it was the first time. On the first pass through xmlHTML is an empty string and every pass after that it's just increasing by what it was the previous time.

Change:

xmlHTML += '<name>' + $('#locationName').val() + '</name><br />';

To Be:

xmlHTML = '<name>' + $('#locationName').val() + '</name><br />';

answered Jul 19, 2013 at 20:50

Avitus

16k6 gold badges47 silver badges54 bronze badges

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

1 Comment

Samuel Over a year ago

Oh wow... I've been having trouble with other jQuery code so I didn't even see how simple this problem really was. Haha, blinded by the simplicity. Thank you.

Collectives™ on Stack Overflow

jQuery Strange behavior using .html() and .empty()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related