etsted Posted September 12, 2014 Share Posted September 12, 2014 i get Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null. When trying to use appendChild, but if i try innerHTML it works. var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|"); var nr1 = ""; for(var i =0;i < suggested_titels.length; i++){ nr1 += "<span onmouseover='pick_this(this.value)'>"+ suggested_titels[i] +"</span>"; } document.getElementById("suggested_query").appendChild(nr1); console.log(nr1); } Link to comment Share on other sites More sharing options...
thescientist Posted September 12, 2014 Share Posted September 12, 2014 what happens if you console log document.getElementById("suggested_query"); before you you use it? Link to comment Share on other sites More sharing options...
Ingolme Posted September 12, 2014 Share Posted September 12, 2014 appendChild() takes a DOM node as a parameter, not text. You'll have to create the node and then pass a reference to that node to appendChild(). Link to comment Share on other sites More sharing options...
davej Posted September 12, 2014 Share Posted September 12, 2014 The child element can't be a string. It has to be an element. This is not to be confused with the use of innerHTML where strings are used. Link to comment Share on other sites More sharing options...
thescientist Posted September 12, 2014 Share Posted September 12, 2014 doh, can't believe I missed that one Link to comment Share on other sites More sharing options...
etsted Posted September 13, 2014 Author Share Posted September 13, 2014 (edited) i tried this, didnt quite work var nr1 = ""; var node = document.createElement("SPAN"); var textnode = ""; for(var i =0;i < suggested_titels.length; i++){ //nr1 += "<span onmouseover='pick_this(this.value)'>"+ suggested_titels[i] +"</span>"; textnode=document.createTextNode(""+suggested_titels[i]+""); node.appendChild(textnode); } document.getElementById("suggested_query").appendChild(node); console.log(node); the console.log logs <span> <br></span>. While inside suggested_query i get all search result as one big span, and the <br> are visible Edited September 13, 2014 by etsted Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2014 Share Posted September 13, 2014 If you want one span for each item in the list, you'll have to create the span and append it to its parent inside the loop. The <span> element doesn't have a value property, so pick_this(this.value) wouldn't do anything. You can use Javascript to add event listeners to the span node you created with document.createElement(). The "" + ... + "" are redundant, they don't actually do anything but make your code longer. You can't put "<br>" in a text node and expect the browser to show something other than text. Use document.createElement("br") to create a <br> element which will be rendered as a long break. Link to comment Share on other sites More sharing options...
etsted Posted September 13, 2014 Author Share Posted September 13, 2014 well i tried this code, but it only renders a <br>. and the console.log shows <span>_</span> var space = document.createElement("BR"); var textnode = ""; for(var i =0;i < suggested_titels.length; i++){ //nr1 += "<span onmouseover='pick_this(this.value)'>"+ suggested_titels[i] +"</span>"; var node = document.createElement("SPAN"); var textnode=document.createTextNode(suggested_titels[i]); node.appendChild(textnode); node.appendChild(space); } document.getElementById("suggested_query").appendChild(node); console.log(node); Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2014 Share Posted September 13, 2014 You need to create a new <br> element for each element in the list, you can't just have one, or all you'll see in the resulting document it one <br>. You could even omit the <br> and make the <span> appear as a block using CSS instead. You have to add each <span> to the main element. If you don't put appendChild() inside the loop then only the last span will be added to the document. If you want to see what's going on, rather than logging node which is just one element, log the element containing all the nodes, which is the "suggested_query" element. Link to comment Share on other sites More sharing options...
etsted Posted September 13, 2014 Author Share Posted September 13, 2014 when i search for something there is always a <br> tag infront of the search term, other than that it works for(var i =0;i < suggested_titels.length; i++){ //nr1 += "<span onmouseover='pick_this(this.value)'>"+ suggested_titels[i] +"</span>"; var space = document.createElement("BR"); var node = document.createElement("SPAN"); var textnode=document.createTextNode(suggested_titels[i]); node.appendChild(textnode); node.appendChild(space); document.getElementById("suggested_query").appendChild(node); } Link to comment Share on other sites More sharing options...
etsted Posted September 13, 2014 Author Share Posted September 13, 2014 go to my website widegrass.com and search "n" Link to comment Share on other sites More sharing options...
etsted Posted September 13, 2014 Author Share Posted September 13, 2014 i dont know why but it stopped working, then when i console.log it i get this: GET http://widegrass.com/suggested_query.php?q=N&type=images 500 (Internal Server Error) . What does that mean? Link to comment Share on other sites More sharing options...
davej Posted September 14, 2014 Share Posted September 14, 2014 br is not a child of the span. It is a sibling. Link to comment Share on other sites More sharing options...
etsted Posted September 14, 2014 Author Share Posted September 14, 2014 so it wont work? Link to comment Share on other sites More sharing options...
Ingolme Posted September 14, 2014 Share Posted September 14, 2014 <br> can go inside a span if you want, but it makes more sense to put it between the spans A 500 error means the server has a problem, it has nothing to do with your code. When I get a 500 error it's usually because I used an invalid expression in a .htaccess file. Link to comment Share on other sites More sharing options...
etsted Posted September 14, 2014 Author Share Posted September 14, 2014 (edited) var sQ = document.getElementById("suggest_query");var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|"); for(var i =0;i < suggested_titels.length; i++){ var space = document.createElement("BR"); var node = document.createElement("SPAN"); var textnode=document.createTextNode(suggested_titels[i]); node.appendChild(textnode); node.appendChild(space); sQ.appendChild(node); if(suggested_titels[i] == "No suggestions"){ sQ.innerHTML = ""; } It seem to be working, but from my code you can see that i want to empty the div when the request equal "No suggestions", but instead it appends "No suggestions" at the back of my div, so it will contain all of the suggested terms and "No suggestions" at the end Edited September 14, 2014 by etsted Link to comment Share on other sites More sharing options...
davej Posted September 14, 2014 Share Posted September 14, 2014 It might be helpful if you actually posted an example of HTML code in the format that you are trying to create. It is not exactly clear what you are trying to do. <div id="suggested_query"><span onmouseover='pick_this(this.value)'>title0</span><br><span onmouseover='pick_this(this.value)'>title1</span><br><span onmouseover='pick_this(this.value)'>title2</span><br></div> For example the above doesn't make any sense because spans don't have values. Link to comment Share on other sites More sharing options...
etsted Posted September 14, 2014 Author Share Posted September 14, 2014 i want sQ to empty when the response from ajax.responseText returns No suggestions, but instead it keeps the content of the div and append No suggestions at the end of the div Link to comment Share on other sites More sharing options...
Ingolme Posted September 14, 2014 Share Posted September 14, 2014 You need to think your problem through. Set your objective and then determine the steps required to achieve it. You're receiving a string from the server with data. Rather than separating values with "S_E_C_R_E_T__S_I_G_N__!_|_!_|" (which takes up a lo tof bandwidth if the list is long) try encoding it as a JSON array. You could return an empty array if you want to determing there are no suggestions. 1. Decode the array received from the server. 2a. If the array is empty then put "No suggestions" into the output element. 2b. If the array is not empty then begin looping through array values 2b.1. Create an element to contain the value 2b.2. Add an event handler to the element. 2b.3. Add the value to the element. 2b.4. Add the element to the output element. <br> elements won't be needed if the list elements are blocks. CSS can set any element to a block by writing "display: block". Blocks are also easier to click on than inline elements because they're rectangular meanwhile inline elements can only be clicked if the mouse is over the letters. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now