prasadshir/jquery-dom-manipulation.html

## jquery-dom-manipulation.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
//var t = $("#para").text();
//    alert(t);
//    $("#para2").text(t);
var t = $("#para").html();
//    alert(t);
    $("#para2").append(t); // also try $("#para2").prepend();
});

$("#btn2").click(function(){
 //alert($("#inp").val());
    $("#para2").after($("#inp").val()); //also try $("#para2").before();

});

$("#btn0").click(function(){
    $("#hdg").text($("#inp").val()); //also try
});

  });
</script>
</head>
<body>
    <h1 id="hdg">Heading</h1>
    <input type="text" id="inp"/>
    <p id="para">this is a <b>test paragraph.</b></p>
    <p id="para2">second para</p>
    <button id="btn0">Change Header</button>
    <button id="btn1">Append to second para</button>
    <button id="btn2">Add after second para</button>

</body>
</html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	$("#btn1").click(function(){
	//var t = $("#para").text();
	// alert(t);
	// $("#para2").text(t);
	var t = $("#para").html();
	// alert(t);
	$("#para2").append(t); // also try $("#para2").prepend();
	});

	$("#btn2").click(function(){
	//alert($("#inp").val());
	$("#para2").after($("#inp").val()); //also try $("#para2").before();

	});

	$("#btn0").click(function(){
	$("#hdg").text($("#inp").val()); //also try
	});

	});
	</script>
	</head>
	<body>
	<h1 id="hdg">Heading</h1>
	<input type="text" id="inp"/>
	<p id="para">this is a <b>test paragraph.</b></p>
	<p id="para2">second para</p>
	<button id="btn0">Change Header</button>
	<button id="btn1">Append to second para</button>
	<button id="btn2">Add after second para</button>

	</body>
	</html>