document的高級篇中提供了節(jié)點操作的函數(shù)，具體包括：獲取節(jié)點，改變節(jié)點，刪除節(jié)點，替換節(jié)點，創(chuàng)建節(jié)點，添加節(jié)點，克隆節(jié)點等函數(shù)。我們可以利用這些函數(shù)動態(tài)改變html的節(jié)點。

1、JavaScript

<script type="text/javascript">
function test1(){//對個節(jié)點的ID相同時候的情況
var myhref = document.getElementById('same');
window.alert(myhref.innerText);
}

function test2() {//輸出節(jié)點的值
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked) {
window.alert("你的愛好是：" + hobbies[i].value);
}
}
}

function getN() {//通過標簽獲取標簽對應(yīng)的值
var myObj = document.getElementsByTagName('input');
for (var i = 0; i < myObj.length; i++) {
window.alert(myObj[i].value);
}
}

function addtags() {//動態(tài)添加超鏈接節(jié)點<a></a>
//(1)創(chuàng)建元素<a>
var myElement = document.createElement("a")
//(2)給元素添加必要的標示信息
myElement.;
myElement.innerText = "連接到新浪";
myElement.style.left = "200px";
myElement.style.top = "300px";
myElement.style.position = "absolute";
//添加到document.body
document.body.appendChild(myElement);
}

var i = 1;
function addinput() {//添加input元素
var myElement = document.createElement('input');
myElement.type = "button";
myElement.value = "奔跑吧";
//myElement.id="i++";
myElement.id = "id1";
document.getElementById("div1").appendChild(myElement);
}

function deleteinput() {
//刪除一個元素的前提是要知道其父元素是什么。此方法不是很靈活
//方法一
//document.getElementById("div1").removeChild(document.getElementById('id1'));
//方法二
document.getElementById('id1').parentNode.removeChild(document
.getElementById('id1'));
}
</script>

2.body體中的調(diào)用

<body>
<a id="same" >搜狐</a>
<a id="same" >百度</a>
<a id="same" >新浪</a>
<input type="button" value="提交" onclick="test1()"/>
<!-- ID相同的時候只認識第一個 -->

<hr/>
<input type="checkbox" name="hobby" value="籃球"/>籃球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="排球"/>排球
<input type="button" value="提交" name="testing" onclick="test2()"/> 

<!-- <hr/>
<h1>獲取指定標簽的內(nèi)容</h1>
<input type="button" value="智能獲取" onclick="getN()"> -->

<hr/>
<h1>智能添加標簽</h1>
<input type="button" value="智能添加" onclick="addtags()"/>
<hr/>
<h1>智能添加/刪除input</h1>
<div style="width:400px;height:300px;border:3px dashed red;" id="div1"></div>
<input type="button" onclick="addinput()" value="inputAdd"/>
<input type="button" onclick="deleteinput()" value="inputDelete"/>

</body>

以上就是小編為大家?guī)淼膉avascript的document中的動態(tài)添加標簽實現(xiàn)方法全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: