javascript怎么创建div

JavaScript014

javascript怎么创建div,第1张

纯JAVASCRIPPT创建

(1):document.getElementById("要创建DIV位置的ID").innerHTML='<div>div里面的内容</div>'

(2):

var createDiv=document.createElement("div") 

createDiv.title="div title." 

createDiv.id="id" 

createDiv.class="class" 

createDiv.innerHTML="div里面的内容!" 

document.body.appendChild(createDiv)//添加到BODY节点中 

JQUERY

$("#要创建DIV位置的ID").html('<div>div里面的内容</div>')

1、利用js代码首先创建一个div，document.createElement('div')

2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。

3、确定位置之后，显示div即可。

示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法：

function createDiv(){

    //首先创建div

    var descDiv = document.createElement('div')

    document.body.appendChild(descDiv)

    //获取输入框dom元素

    var text = document.getElementById('city')

    //计算div的确切位置

    var seatX = text.offsetLeft + text.offsetWidth//横坐标

    var seatY = text.offsetTop + text.offsetHeight//纵坐标

    //给div设置样式，比如大小、位置

    var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:" 

    + seatX + 'pxtop:' + seatY + 'px'

    //将样式添加到div上，显示div

    descDiv.style.cssText = cssStr

    descDiv.innerHTML = '这是一个测试的div显示的内容'

    descDiv.id = 'descDiv'

    descDiv.style.display = 'block'

}

JS里添加样式的方法：

1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。

2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。

3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。

4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。

5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。

6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。