Prepend Methods

by chayacooper

HTML

<ul> 
    <li><label><div style="background-color:#000000" class="color">
        <div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black
 </label></li>
    
    <li data-background="Navy" name="color[]" value="Navy_Blue" data-Color="Navy_Blue"><input type=checkbox><span class="testPrepend">Blue</span></li>
        
    <li><input type="checkbox" name="color[]" value="Bright_Red" />Red</li>
        
    <li><input type=checkbox name="color[]" value="Black" data-Color="Black">Black</li>
    <li><input type=checkbox name="color[]" value="Gray" data-Color="Gray">Gray</li>
</ul>      <br/><br/>     
        
        <br/><br/> 
        <div style="clear:both">
<div id="test">
    <input type=checkbox name="test" class="cbx" value="test">
    <label class="testPrepend">Test</label>
</div>
    
    
<div id="test1">
    <input type=checkbox name="test" class="cbx" value="test1">
    <label>Test1</label>
</div>
<p class="yellow">there, friend!</p>
<p class="yellow">amigo!</p>
    </div>

CSS

.yellow1 {
    background:yellow;
}

ul {margin-left:0px; padding-left: 0px; }
li {  list-style:none; padding: 0 10px 0 0;margin:0px; float:left; }

.colorBox {
            border: 1px solid silver;
            vertical-align:baseline;
            margin-right:4px;
            margin-left:6px;
            width: 16px;
            height:16px;                       
            font-size:8pt;
   /* position:relative; top:0px; left: 0px;
   top:-18px; left: 15px;*/
background-color:yellow;
        }


        .ckBox {} 
        .colorbox_search {border: 1px solid #000000; width: 8px; height:12px;  font-family: Verdana, Arial, Sans-Serif; z-index:1;cursor:pointer; opacity: 1; filter: alpha(opacity = 100); } 
        .
        .colorbox_search_check {vertical-align:middle; text-align:center ; color:white; font-family: Arial Narrow; font-size:5pt; text-shadow: black 0.1em 0.1em 0.2em; display:block; visibility:hidden; margin-left:0.5px; } 	


        .color {
            border: 1px solid silver;
            vertical-align:baseline;
            margin-right:4px;
            margin-left:6px;
            width: 1.65em;
            height:1.65em;
            font-size:8px;
            float:left;
        }
        .color input {
            height: 100%;
            width: 100%;
            font-size:200%;
        }

JavaScript

//Same results
//$("p").prepend("<b>Hello </b>");
//$("<b>Hello </b>").prependTo("p");

$("<b>Hello </b>").prependTo(".yellow");
$("<b>Hello </b>").prependTo("#test1 label");
  
//$(".testPrepend").prepend('<div class="colorBox"></div>' );
//$('<div class="colorBox"></div>').prependTo(".testPrepend");

//$("li span").prepend('<div class="color"></div>').css('background-color', $(this).parent().attr("data-background"));

$("li span").prepend('<div class="color"></div>').css('background-color', 'red');


 //$(this).parent().css('background-color', $(this).attr("data-background"));
    
// $('<div class="colorBox"></div>').prependTo("label span");       
//$('<div class="colorBox"></div>').prependTo(this);

   
//$(".testPrepend").before('<span class="colorBox">&#10003;</span>' );

//$("<div>7 </div>").prependTo("span");
//$($newdiv1).prepend("li span");
//var $newdiv1 = $('<div id="object1">Var </div>'),