js_8_dom标签

时间:2023-12-04 15:31:15

创:9_3_2017  星期4

修:

对于在a标签中,如何阻止跳转?

定义一个事件,事件顺序执行后才执行跳转,如果事件函数返回false,则后面事件就不触发

事件1 = “return 函数();”

函数多出一句 return false;

这样可以做到前端验证

需求1,点击按钮一下,按钮变成新标签

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>
<div >
<a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a>
</div>
<script>
function Create_b() {
// 获得标签
var nid =document.getElementById('a');
// 新标签字符串
var new_b = '<input type="text">';
// 替换获得标签
nid.innerHTML = new_b;
// 事件成功后不执行下一个事件
return false; }
</script>
</body>
</html>

需求2,点击新建标签按钮,从最前面添加标签

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>   
<div> <a href="http://www.baidu.com" id="a" onclick="return Create_b1();">创建标签</a> </div> <script>
     function Create_b1() {
// 定义新建标签
var new_b = '<input type="text">';       
// 每次在最前面新建标签
  a.insertAdjacentHTML("beforeBegin",new_b);    
  return false;
}
</script>
</body>
</html>

需求3,前面两者太low了,有个高级的方法么?

有,通过创建对象添加

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>
<div > <a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a> </div>
<script>
function Create_b() {
// 创建input标签对象
    var new_b = document.createElement('input');       
// 定义type属性
    new_b.type='text';
// 定义value属性
    new_b.value = 'hehehe';
// 找到标签
    var nid = document.getElementById('a');     
// 在找到标签后面添加,同一级
    nid.appendChild(new_b);    return false; }
</script>
</body>
</html>