English | 正體中文 | 简体中文

jQuery Dom内部操控


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

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

//HTML变成
<div>anchor</div><span>test</span>

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

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

//产生HTML
<div>anchor</div><span>test</span>

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

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

//HTML变成
<span>test</span><div>anchor</div>

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

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

//HTML变成
<span>test</span><div>anchor</div>


范例
All I need is a
I like to eat
is good for you
is all I need

范例程式码Expand
<!-- HTML -->
<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>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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和text操控
$("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


范例
Lemon is a fruit!
 
Lemon is a fruit!
 

范例程式码Expand
<!-- HTML -->
<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>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>



© 2012 PureExample.com contact