Adding elements to <li>

[Wexoni]

Hello Everyone

I have very annoying problem, that I cant solve. I have a <div> that is generated from dll, to which I do not have access. I need to take content of that <DIV> and rearrange it, for display purposes.

I wrote javascript that takes the information from the DIV, parses it and populates <ul> to simulate dropdown.
Problem is I am getting some extra characters that ruin the link.

This is the JS that I use:

       <script type="text/javascript">
           function returnArray() {
               var divContent = document.getElementById('tribSort');

               var parentGuest = document.getElementById("hey");
               var lielement = document.createElement('li');

               var options = ["Price Low to High", "Price High to Low", "Name A to Z", "Name Z to A", "Bestselling", "Rating", "Recently Added"];

               var select = document.getElementById("selectNumber");
               var clickvalue = " onClick=\"";
               var navodnici = "\"";
               var a = new Array();
               var b = new Array();

               for (var i in divContent.childNodes) {
                   var lielement = document.createElement('li');
                 
                   a[i] = divContent.childNodes[i].toString(); // This is Value
                   b[i] = divContent.childNodes[i].getAttribute("onClick"); // This is onclick

                   var combined = "http://" + a[i] + navodnici + clickvalue + b[i];
                   var tet = "<a href=" + a[i] + " onclick=" + b[i] + ">" + options[i] + "</a>";
 
                   alert(tet): // this looks fine
                   lielement.innerHTML = tet;
                   alert(lielement.innerHTML); // this is not fine
                   parentGuest.appendChild(lielement);
                   //<li><a href="#" onclick="showhide('d2');">Lithium-ION</a>

               }

               //     }
               return a;

           }

           function init() {
               var a = returnArray();
               alert(a)
           }

//           var ele = document.getElementById("tribSort");
//           ele.style.display = "none";
           //    alert(ele);
</script>

In the code there is first alert statement, and it shows that it is being parsed exactly as it should, as shown in image 1:



After second alert in the code, after I added the variable using innerHTML there are some things that were not there before, underlined in red in the image 2:




I have seen somewhere there are problems using innerHTML, but I dont know th eother way of doing it.

Can someone please help me with this issue?


Thank you very much.

[devnull69]

As you can see, the browser's parser has added the missing double quotes to wrap your attribute values. Even though some people don't like to use them, strictly speaking they are mandatory. If you don't provide them, the browser will have to add them which might fail terribly (qed).

So you should add those double quotes yourself at the right positions and it should work.

onclick="SetCookie(........); return false;"

[VIPStephan]

What I see is that in the original link you aren’t putting the attribute values into quotes which confuses the parser if there are spaces, as there are in the onclick event handler.

[Wexoni]

Thank you so much.

I did not even suspect missing quotes... I thought it is something entirely else!!!


It works now

[Dormilich]

Originally Posted by devnull69

Even though some people don't like to use them, strictly speaking they are mandatory.

as for HTML - no.

HTML is perfectly fine without, BUT it applies apropriate rules then (like, attribute value ends at the next space character). HTML is made to be extremely forgiving towards errors (unlike XHTML) and thus your assumption on what HTML should do (may) turn out wrong.