1、动态创建网页新文本段落
<div id="id-div1" class="css-p"></div><br><div id="id-div2" class="css-p"><p>已经存在的文本段落.</p></div><br><div id="id-div3" class="css-p"><p>第一段文本段落.</p><p>第三段文本段落.</p></div><br><input type="button" id="id-createEle-p-new" onclick="on_createEle_p_new();" value="动态创建文本段落" /><input type="button" id="id-createEle-p-append" onclick="on_createEle_p_append();" value="动态追加文本段落" /><input type="button" id="id-createEle-p-insert" onclick="on_createEle_p_insert();" value="动态插入文本段落" />
</body>
<script type="text/javascript">/*** create p*/function on_createEle_p_new() {var id_div1 = document.getElementById("id-div1");var p1 = document.createElement("p");//创建<p>元素p1.innerText = "动态创建的文本段落.";id_div1.appendChild(p1);}/*** create p append after p*/function on_createEle_p_append() {var id_div2 = document.getElementById("id-div2");var p2_2 = document.createElement("p");p2_2.innerText = "动态追加(appendChild)的文本段落.";id_div2.appendChild(p2_2);}/*** create p insert into p & p*/function on_createEle_p_insert() {var id_div3 = document.getElementById("id-div3");var child_p = id_div3.children;var p3_1 = child_p[0];var p3_3 = child_p[1];var p3_2 = document.createElement("p");p3_2.innerText = "动态插入(insertAfter)的文本段落.";id_div3.insertBefore(p3_2, p3_3);}
</script>
2、动态删除
remove()、removeChild()
3、动态替换
innerHTML、innerText
4、主动触发按钮单击事件
document.getElementById("id-btn-name").click();
5、动态修改元素属性值
<p>Modify Attributes: <input type="text" class="css" name="name" id="id-name" value="King"/>
</p>
<input type="button" id="id-get-attr" onclick="on_get_attr();" value="获取标签的全部属性"/>
<input type="button" id="id-modify-attr" onclick="on_modify_attr();" value="修改标签的全部属性"/>
</body>
<script type="text/javascript">/*** Func - get attributes*/function on_get_attr() {var input = document.getElementsByTagName("input");var attrs = input[0].attributes;console.log("print input's all attributes --- ");for (var i = 0; i < attrs.length; i++) {console.log("attr name : " + attrs[i].name + ", value : " + attrs[i].value);}}/*** Func - modify attributes*/function on_modify_attr() {var input = document.getElementsByTagName("input");var attrs = input[0].attributes;console.log("modify input's all attributes --- ");var new_attrs = ["password", "newCSS", "pwd", "id-pwd", "123456"];for (var i = 0; i < attrs.length; i++) {attrs[i].value = new_attrs[i];}for (var j = 0; j < attrs.length; j++) {console.log("attr name : " + attrs[j].name + ", value : " + attrs[j].value);}}
</script>