createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
語法:
document.createElement(tagName)
參數:
tagName:字符串值,這個字符串用來指明創建元素的類型。
注意:要與appendChild() 或 insertBefore()方法聯合使用,將元素顯示在頁面中。
我們來創建一個按鈕,代碼如下:
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "創建一個按鈕"; body.appendChild(input); </script>
效果:在HTML文檔中,創建一個按鈕。
我們也可以使用setAttribute來設置屬性,代碼如下:
<script type="text/javascript"> var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert('This is a text!');"); body.appendChild(btn); </script>
效果:在HTML文檔中,創建一個文本框,使用setAttribute設置屬性值。 當點擊這個文本框時,會彈出對話框“This is a text!”。
試一試,實現在HTML文檔中創建一個鏈接,并設置相應屬性。
1. 在右邊編輯器補充代碼,完善createa(url,text)創建鏈接函數,參數1為鏈接地址,參數2為鏈接文本。函數中添加鏈接地址、文本、文字顏色屬性。
2. 調用createa函數,鏈接地址 http://www.xianlaiwan.cn,文本為:慕課網
var body= document.body;
//創建鏈接
function createa(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
body.appendChild(a);
}
// 調用函數創建鏈接
createa("http://www.xianlaiwan.cn/","慕課網");
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報