Using jQuery to add DOM elements based on option:selected choice

Question 1

Looks like there are a few mistakes in the code you posted. There are a few simple errors like spelling and a missing $ inside the event handler. Also the way you're getting the value of the dropdown can be simplified. Here's an example.

<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    $(function(){
        $('#testselect').change(function() {
            var selid = $(this).val();
            if (selid == "Yes"){
                $("<div><span>test option</span></div>").insertAfter($("#inner"));
            }
        });
    });

</script>
<title>Untitled 2</title>

</head>

<body>
<div id="outer">
    <div id="inner">
        <select id="testselect" name="testselect">
            <option value="" selected="selected"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>    
 </div>

</body>
</html>

Question 2

Make your function:

$('#testselect').change(function () {
    if ($(this).val() == "Yes") {
        $("<div><span>test option</span></div>").insertAfter("#inner");
    }
})

jsFiddle example

.find() looks at descendant elements, so your $(this).find('#testselect :selected') won't match anything since this here is already #testselect. What you might have been thinking of was $(this).find('option:selected').val(), but $(this).val() is shorter and more commonly used. Note that repeatedly changing the select element will repeatedly add more test option divs. So you may be better of having a set deiv and just show/hide it.