How to parse XML in JavaScript and preserve spaces in nodeValue when appending to a button inside a loop?

1
votes

I'm parsing a xml result set and appending the nodeValues to buttons. I'm trying to set the value of that button to a node value and it works when there is no space in the nodevalue, but it breaks it apart when there is space. I'm also setting the text of the button to the nodevalue which works great, it doesn't break the nodevalue apart when there is a space here, only when setting the value.

I have tried setting the nodeValue as a variable in the loop and formatting it there, but still it's break it apart if spaces when setting the value. 

var i;
        var xmlDoc = xml.responseXML;
        var li = "";
        var x = xmlDoc.getElementsByTagName("string");
        var valueName;

        for (i = 0; i < x.length; i++) {                
            li += "<li><button id=documentBtn class=btnNav onclick=javascript:hideFunction(value) value=" + "" + x[i].childNodes[0].nodeValue; + "" + ">" +
                x[i].childNodes[0].nodeValue +
                "</button ></li >";                
        }

This is producing this:

<button class="btnNav" id="documentBtn" onclick="javascript:hideFunction(value)" value="Site" safety="" specific="" plans="">Site Specific Safety Plans</button>

And it should produce this:

<button class="btnNav" id="documentBtn" onclick="javascript:hideFunction(value)" value="Site Specific Safety Plans">Site Specific Safety Plans</button>
1
javascriptxml

1 Answers

2
votes

What the code actually outputs is:

<button class=btnNav id=documentBtn onclick=javascript:hideFunction(value) value=Site Specific Safety Plans>Site Specific Safety Plans</button>

The HTML attribute values that contain spaces must be wrapped in quotes ('' or "") to be handled properly:

var i;
var xmlDoc = xml.responseXML;
var li = "";
var x = xmlDoc.getElementsByTagName("string");
var valueName;

for (i = 0; i < x.length; i++) {                
    li += "<li><button id=documentBtn class=btnNav onclick=javascript:hideFunction(value) value='" + x[i].childNodes[0].nodeValue + "'>" +
        x[i].childNodes[0].nodeValue +
        "</button></li>";                
}

The code above should produce:

<button class=btnNav id=documentBtn onclick=javascript:hideFunction(value) value='Site Specific Safety Plans'>Site Specific Safety Plans</button>