jQuery Dom Inner Manipulation

.append()
//Original HTML
<div>anchor</div>

//after jQuery.append()
$("div").append("<span>test</span>");

//Yields HTML
<div>anchor</div><span>test</span>

.appendTo()
//Original HTML
<div>anchor</div>

//after jQuery.appendTo()
$("<span>test</span>").appendTo("div");

//Yields HTML
<div>anchor</div><span>test</span>

.prepend()
//Original HTML
<div>anchor</div>

//after jQuery.prepend()
$("div").prepend("<span>test</span>");

//Yields HTML
<span>test</span><div>anchor</div>

.prependTo()
//Original HTML
<div>anchor</div>

//after jQuery.prependTo()
$("<span>test</span>").prependTo("div");

//Yields HTML
<span>test</span><div>anchor</div>
Example$.append(), $.appendTo(), $.prepend(), $.prependTo()
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#example-section40 button").click(function(){
        var id = $(this).attr("id");

        if(id == "ele405"){
            $("#ele401").append("<span style=\"color:red\"> Car</span>");
        }else if(id == "ele406"){
            $("<span style=\"color:red\"> ice cream</span>").appendTo("#ele402")
        }else if(id == "ele407"){
            $("<span style=\"color:red\">Celery </span>").prependTo("#ele403");
        }else if(id == "ele408"){
            $("<span style=\"color:red\">Money </span>").prependTo("#ele404");
        }
    
    });
});
</script>

<!-- HTML -->
<a name="#append-appendto-prepend-prependto"></a>
<div id="example-section40">    
    <div id="ele401">All I need is a </div>
    <button id="ele405" type="button">Do append</button>

    <div id="ele402">I like to eat </div>
    <button id="ele406" type="button">Do appendTo</button>

    <div id="ele403"> is good for you</div> 
    <button id="ele407" type="button">Do prepend</button>

    <div id="ele404"> is all I need</div>
    <button id="ele408" type="button">Do prependTo</button>
</div>


Html and text manipulation
$("div").html("<span>test</span>") //change div inner html
$("div").text("demo") //change div inner text
var a1Html = $("#a1").html() //get a1 inner html
var a2Text = $("#a2").text() //get a2 inner text
ExampleElement html text manipulation
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#example-section41 button").click(function(){
        var id = $(this).attr("id");

        if(id == "ele412"){
            $("#ele411").html("Lemon is a <font color=\"red\">vegetable?</font>");
        }else if(id == "ele413"){
            alert($("#ele411").html());
        }else if(id == "ele415"){
            $("#ele414").text("Lemon is a vegetable?");
        }else if(id == "ele416"){
            alert($("#ele414").text());
        }
    
    });
});
</script>

<!-- HTML -->
<a name="#html-text"></a>
<div id="example-section41">    
    <span id="ele411">Lemon is a <font color="blue">fruit!</font></span>
    <div>
        <button id="ele412" type="button">Change HTML</button>&nbsp;
        <button id="ele413" type="button">Show HTML</button>
    </div>

    <span id="ele414">Lemon is a fruit!</span>
    <div>
        <button id="ele415" type="button">Change text</button>&nbsp;
        <button id="ele416" type="button">Show text</button>
    </div>
</div>




comments powered by Disqus