在页面中动态添加HTML

如：

new Insertion.After("divResult", " <div>After</div>");

是将 html 插入到页面中作为 divResult的后继兄弟节点。

同理,new Insertion.Bottom、new Insertion.top仅仅是插入方向的问题

 

<form method="post" action="http://192.168.0.109:8888/magento/greeting.php" id="test-form" name="test-form"> <div id="div1"> <label for="name">Enter your name:</label> <input id="username" name="username" type="text" /> <input id="password" name="password" type="text" /> <input id="testbutton" name="testbutton" type="button" value="testbutton" > </div> <div id="divResult" ></div> </form>

 

 

Ajax.js

 

Event.observe(window, 'load', init, false); function init(){ Event.observe('testbutton', 'click', replaceDiv1); } function replaceDiv1(){ //Element.remove('divResult'); new Insertion.After("divResult", " <div>After</div>"); new Insertion.Bottom("div1", " <div>Bottom</div>"); new Insertion.Top("div1", "<div>Top</div>"); new Insertion.Before("div1", " <div>Before</div>"); }