Jump to content

appendChild not working


etsted

Recommended Posts

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

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 by etsted
Link to comment
Share on other sites

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

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

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

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

<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

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 by etsted
Link to comment
Share on other sites

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...