Ending HTML Tag for me..?

[Spunky]

Can anyone tell me why the code below:

var swapTxt = document.getElementById('first_div');	swapTxt.innerHTML="<div id='second_div'>";	swapTxt.innerHTML+="<p>Text</p>";	swapTxt.innerHTML+="<p>More text</p>";	swapTxt.innerHTML+="<p><span>One</span>";	swapTxt.innerHTML+="<span>Two</span>";	swapTxt.innerHTML+="<span>Three</span></p>";	swapTxt.innerHTML+="<p><span>One</span>";	swapTxt.innerHTML+="<span>Two</span>";	swapTxt.innerHTML+="<span>Three</span></p>";	swapTxt.innerHTML+="<p><span>One</span>";	swapTxt.innerHTML+="<span>Two</span>";	swapTxt.innerHTML+="<span>Three</span></p>";	swapTxt.innerHTML+="</div>";

Outputs this HTML:

<div id="first_div">  <div id="second_div"></div>    <p>Text</p>    <p>More text</p>    <p><span>One</span></p>    <span>Two</span>    <span>Three</span>    <p></p>    <p><span>One</span></p>    <span>Two</span>    <span>Three</span>    <p></p>    <p><span>One</span></p>    <span>Two</span>    <span>Three</span>    <p></p>  </div></div>

I'm pretty stumped here, this is basic stuff I've done before and I don't understand why it is acting up so.

Edited November 11, 2014 by Spunky

[davej]

I would suggest you build the complete string and then use innerHTML once.

[dsonesuk]

Every time you add a unclosed element by JavaScript the browser will attempt by default to correct it by adding a closing tag for that element.

[Spunky]

I would suggest you build the complete string and then use innerHTML once.

That's not what this guy suggested from another post with a different issue of mine.

You can use double-quotes, just be sure to escape them with "

You could break the string into pieces to make it more readable.

var prompt_div = "<div id='genderCheck'>";prompt_div += "<h4>First of all, select your gender:</h4>";prompt_div += "<input type='radio' name='gender' value='male' onClick='userprompt("male","");'> Male";prompt_div += "<input type='radio' name='gender' value='female' onClick='userprompt("female");'> Female";prompt_div += "</div>";prompt_div += "<div id='ageCheck'>";prompt_div += "<h4>Now a bit more..</h4>";prompt_div += "<input type='radio' name='age' value='adult' onClick='userprompt("","adult");'> Adult";prompt_div += "<input type='radio' name='age' value='child' onClick='userprompt("","child");'> Child";prompt_div += "</div>";prompt_div += "<div id='textPrompt'>";prompt_div += "<h4>Great! Now, go ahead and type a response to your fellow classmates:</h4>";prompt_div += "<textarea id='userResponse'>Type here...</textarea>";prompt_div += "<button type='button' onClick='submitResponse();'>Enter</button>";prompt_div += "</div>";

Usually, rather than making Javascript to write all this, it's already on the page and you just use CSS and Javascript to make it appear or disappear.

 

Doing it this way solved an issue with sending parameters with the functions that ran onClick. I had no problems once I implemented this code. I'm just not sure if this is a slightly different circumstance this time that something is acting weird. I don't have parameters to send but I still used this method to keep it more readable, as suggested. I wasn't sure if maybe it had to do with now I have span and p tags I don't know.

[Ingolme]

If you read the post you just quoted, you'll notice that I didn't use innerHTML there. The string is being built first in the variable "prompt_div".

[Spunky]

If you read the post you just quoted, you'll notice that I didn't use innerHTML there. The string is being built first in the variable "prompt_div".

Not true. I did read the post and I did NOT notice that. Trick of the eyes that is, good assumption tho. I see the difference now.