Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Experiencing some strange problems while trying to append html code with javascipt

HTML innerHTML

  • Please log in to reply
4 replies to this topic

#1 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 03 September 2011 - 12:22 PM

Hi. this code should take values from array categories, put them into dropdownlist and append that list to html's div (searchForm). However this code always appends new html tags like this : <div class='advancedSearchButton'>Search by category: <select name='category'></select></div><option>... all options goes here. Why does this happen?. I always iterate array first and only then add </select></div> to searchForm element. Moreover, when i commented addition of</select></div>, code still adds those tags before options. I would be grateful if someone could explain me what sort of x-files are happening here. searchForm and categories are initialized well

searchForm.innerHTML += "<div class='advancedSearchButton'>Search by category: <select name='category'>";
    var options = "";
    for (var i = 0; i < categories.length; i++){
        if (i == 0)
            options = "<option value='" + categories[i] + "' selected>" + categories[i] + "</option>";
        else
            options += "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
    }
    searchForm.innerHTML += options; // + "</select></div>";

  • 0

#2 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 03 September 2011 - 12:50 PM

it's because your browser is a nice guy.
When he see that you open an <select> but forget to close it, he's kind enough to close it for you.

Insted of inserting directly into the DOM, insert everything (div, select and options) into a var and at the very end, insert it in searchForm
  • 0

#3 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 03 September 2011 - 01:01 PM

thanks. It's a pitty that my browser is not nice enough to create entore website for me
  • 0

#4 DarkLordCthulhu

DarkLordCthulhu

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 422 posts
  • Location:The bash shell
  • Programming Language:C, JavaScript, Bash, Others
  • Learning:Ruby, Others

Posted 04 September 2011 - 07:59 AM

If you want to create a dropdown list, a better method would be to have a list already in the HTML code and set its display: property in the CSS to "none", then when the user clicks the appropriate button, have Javascript change display to "block". This way user data is not lost. Like so:

<style type="text/css">
.dropdown{
	display: none;
}
</style>

...

<script type="text/javascript">
function show(){
	document.getElementById( "dropdown" ).style.display = "block".
}
</script>

As for diagnosing the problem with the innerHTML, I don't have enough information to help you with that. Your code looks fine from what I can tell. It may be something else that's the problem.
  • -1
Programming is a journey, not a destination.

#5 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 05 September 2011 - 02:33 AM

thanks for a tip
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download