javascript的document中的动态添加标签实现方法

前端之家收集整理的这篇文章主要介绍了javascript的document中的动态添加标签实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

document的高级篇中提供了节点操作的函数,具体包括获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数。我们可以利用这些函数动态改变html的节点。

1、JavaScript

function test2() {//输出节点的值
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked) {
window.alert("你的爱好是:" + hobbies[i].value);
}
}
}

function getN() {//通过标签获取标签对应的值
var myObj = document.getElementsByTagName('input');
for (var i = 0; i < myObj.length; i++) {
window.alert(myObj[i].value);
}
}

function addtags() {//动态添加链接节点
//(1)创建元素
var myElement = document.createElement("a")
//(2)给元素添加必要的标示信息
myElement.href = "
http://www.sina.com";
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'));
}

2.body体中的调用


Box
" name="hobby" value="篮球"/>篮球 Box" name="hobby" value="足球"/>足球 Box" name="hobby" value="排球"/>排球

获取指定标签内容


智能添加标签

添加" onclick="addtags()"/>

智能添加/删除input

以上就是小编为大家带来的javascript的document中的动态添加标签实现方法全部内容了,希望大家多多支持编程之家~

猜你在找的JavaScript相关文章