一、Dom屬性
1.1 設置屬性(setAttribute)
設置某個標簽的屬性，setAttribute(key,value)
<body>
<div>
<input id="i1" type="text">
</div>
</body>
設置value屬性：
var obj = document.getElementById("i1")
obj.setAttribute("value", "輸入關鍵字")
1.2 刪除屬性，removeAttribute(key)
obj.setAttribute("value", "輸入關鍵字")
obj.removeAttribute('value') // 刪除屬性
1.3 獲取所有屬性(attributes)
obj.attributes
NamedNodeMap {0: id, 1: type, id: id, type: type, length: 2}
1.4 獲取某個屬性(getAttribute)
obj.getAttribute('type')
"text
二、創建標簽
2.1 字符串形式
把需要添加的標簽，直接以字符串形式寫入
<body>
<div>
<input type="button" onclick="addEle();" value=" + "/>
</div>
<div id="i1">
<input type="text" />
<br />
</div>
<script>
function addEle() {
var add_tag = "<p><input type='text' /></p>"; // 創建一個標簽
var tag = document.getElementById('i1');
tag.insertAdjacentHTML("beforeEnd", add_tag); // 把標簽添加到i1中
}
</script>
</body>
效果，點擊“+”增加輸入框：
注：insertAdjacentHTML，第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，他們分別指的什么，如圖：
2.2 對象方式添加
<body>
<div>
<input type="button" onclick="addEle();" value=" + "/>
</div>
<div id="i1">
<input type="text" />
<br />
</div>
<script>
function addEle() {
var add_tag = document.createElement("input"); //創建input標簽
add_tag.setAttribute('type', 'text'); //為input標簽添加屬性
add_tag.style.fontSize = '16px'; //為input標簽增加樣式
add_tag.style.color = 'red';
var p_tag = document.createElement('p'); //創建p標簽
p_tag.appendChild(add_tag); // 將input標簽添加到p標簽中
var tag = document.getElementById('i1');
tag.appendChild(p_tag); // 將p標簽添加到i1中
}
</script>
</body>
效果如下：
