如何通过javascript动态添加标签?

可以直接用document.getElementById("divid").innerHTML = "<p>内容</p>"的方式来写。

多个可以循环进行处理。

假设段落文本是个数组：array。

可以通过for (var i = 0i <array.lengthi++) {document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>"}的方式进行处理。

延展：

如果段落过多,直接使用 div.appendChild方法会不段刷新DIV对象,影响运行速度。

正确的方法应该使用 document对象的碎片方法。

document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理，例如:

var strArrayList=[]// 创建一个段落文本数组对象，这些段落文本可能是100个也可能是1000个。

strArrayList[0]='数据111.......'

strArrayList[1]='数据.......'

strArrayList[2]='数据.......'

strArrayList[3]='数据.......'

strArrayList[4]='数据.......'

//...数据n.....

var div=document.getElementById('div1')//获得DIV对象。

var f=document.createDocumentFragment()//创建碎片对象。

for(var i=0i<strArrayList.lengthi++){

var p=document.createElement('P')//动态创建P标签。

p.appendChild(document.createTextNode(strArrayList[i]))//段落字符串。

f.appendChild(p)//附加到碎片对象中。

}

div.appendChild(f)//最后返给DIV对象。

1. 需要有一个被选择的mesh,通过raycaster获取

2. 创建先和一个平面

3. 将线和标注的面放在获取的mesh上

var mouse =new THREE.Vector2()

var raycaster =new THREE.Raycaster()

mouse.x = (event.clientX / domElement.width) *2 -1

mouse.y = -(event.clientY / domElement.height) *2 +1

raycaster.setFromCamera(mouse, camera)

var intersects = raycaster.intersectObjects(scene.children, false)// 

selectedObject = intersects[0].object// 被选中的标注对象

// 

var startP,endP// 这里也是通过raycaster获取到的

var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff

 var lineMat =new THREE.LineBasicMaterial({

        "color": 0xff0000

})

var lineGeo =new THREE.Geometry()

lineGeo.vertices.push(startPos)

lineGeo.vertices.push(endPos)

var line =new THREE.Line(lineGeo, lineMat)

// 初始化一个sprite,这是一个始终面向相机的平面,

var sprite = new textSprite(这并不是一个构造函数,不想写那么多,自行去官网查看)

.......

sprite.scale.set(_spriteScale, _spriteScale, _spriteScale)// 设置的是sprite的大小

selectedObject.add(line)// 添加

line.worldToLocal(_endPos)// 设置点

sprite.position.copy(_endPos)// 设置sprite的位置

line.add(sprite)添加并进行关联

注: sprite可以用于进行标注热点等 *** 作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以把一个canvas,把需要的文字图片等都加入进来.

打开hbuilder软件新建一个html文件，在html页面上创建一个点击的button按钮。然后为button添加点击时创建一个新的div事件。使用“document.createElement()”创建一个新的div，接着使用innerHTML对新建的div设置内容，最后把div放到body显示。在html里为button按钮添加宇哥点击创建div的事件，完成之后代码就写好了，接下来需要看看效果。保存好html文件后使用浏览器打开，此时还没有创建div。最后点击button按钮，会执行脚本创建div的事件，新的div就创建好了，顺利实现了给标签添加了内容。

---