如何用JS获得自定义标签

JavaScript05

如何用JS获得自定义标签,第1张

先新建，在新建,把a标签appendChild()进li就可以了 var oLi=document.createElement('li')//创建li标签 var oA=document.createElement('a')//创建a标签 oLi.appendChild(oA)//将a标签插入到li标签里面

没有直接获取子元素在父元素的序号的方法，需要去循环比对的。

不过，你在循环设置className的时候可以直接把要控制div保存给要被点击的div呀,这样效率高得多

for(var i=0i<first_lengthi++){

first[i*3].className='no_click' //

first[i*3].controlTo = second[i*3]

second[i*3].className='no_display'

}

这样first里面的div被点击，只要 被点击的div.controlTo 就能得到对应的要显示的second组的标签了，非常方便，执行效率也很高。

比如 某个div被点， 只要

th.className = "click"

th.controlTo.className = "display" 即可

代码如下，只能输入五个，请运行检测

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcha rset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

a.blue:link,a.blue:visited{

font-size: 12px

color: #69c

text-decoration: none

}

a.blue:hover{

background: #69c

color: #fff

}

</style>

<script type="text/javascript">

var num = 0

function fInsert(a,b){

oInput = document.getElementById(a)

oItm = b

// alert(b.style.backgroundColor)

if((b.style.backgroundColor == "#6699cc")||(b.style.backgroundColor)){

sReplace = oItm.innerHTML.concat(" ")

oInput.value = oInput.value.replace(sReplace,"")

b.style.backgroundColor = ""

b.style.color = ""

num--

}else{

num++

if(num>5){

num--

return

}

oInput.value = oInput.value.concat(oItm.innerHTML)

oInput.value = oInput.value.concat(" ")

b.style.backgroundColor = "#69c"

b.style.color = "#fff"

}

}

</script>

</head>

<body>

<input type="text" id="cc" style=" width: 300px" />

<a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字2</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字3</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字4</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字5</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字6</a>

</body>

</html>