JS添加input,select标签、设置标签值,获取标签内容


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS添加input,select标签、设置标签值,获取标签内容</title>
</head>
<body>
<div id="board"></div>
<div class="TestText" id="i-TestText">这是一段测试文本</div>
</body>
</html>
<script type="text/javascript">
var board = document.getElementById("board");
var addTagInput = document.createElement("input");//创建标签
addTagInput.type = "button";//设置类型
addTagInput.value = "JS添加标签";//设置值
addTagInput.onclick = displayresult;//绑定函数 触发 每次都执行
//s.onclick = displayresult();//绑定函数 加载触发 加载第一次执行
var addresult = board.appendChild(addTagInput);//添加标签

var addTagSelect = document.createElement("select");
addTagSelect.id = "selVal";
addTagSelect.name = "selValName";
addTagSelect.options[0] = new Option("value1", "1");
addTagSelect.options[1] = new Option("value2", "2", true, true);//Option([文本],[值],[是否默认值],[是否选中])
addresult = board.appendChild(addTagSelect);

//获取标签内容
var textTextVal = document.getElementById("i-TestText").innerText;//查找ID为i-TestText 的标签 内容
textTextVal = document.getElementsByClassName("TestText")[0].innerText;//查找class为TestText 的第一个标签 内容
// alert(textTextVal); //弹出
console.log(textTextVal);//控制台打印值

//判断 select 选中值 选择的是否 默认(defaultSelected)值
function displayresult() {
var x = document.getElementsByTagName("select")[0].selectedIndex;//获取第一个select标签选中状态的索引
var y = document.getElementsByTagName("select")[0].options;//获取第一个select标签的选项数组
// alert(y[x].defaultSelected);
console.log(y[x].defaultSelected);//控制台打印值
}
</script>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM