js如何在指定位置添加div？

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

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

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

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

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

你好！

你的这个问题，可以使用javascript的  insertBefore函数来解决。

大概的代码如下：

var d = document.getElementById("xuhao")//获取序号行节点,设置一个id为xuhao,便于定位

var tr = document.createElement('tr')  //创建行元素

var td =  document.createElement('td')//创建列元素

td.innerHTML = "Hello World!!"

tr.appendChild(td)//将td追加至tr          d.parentNode.insertBefore(tr,d.nextSibling)

//d.parentNode是得到序号行的父节点,通过insertBefore函数将动态生成的tr元素,插入到序号节点的下一个节点(工程坐标)之前.

希望对你有帮助！！

//修改标签

function updateHTMLInfor(jsonObj,divId,allDivId){

    //判断元素是否存在

    if(jsonObj.dataId!=null&&jsonObj.dataId>0){

        var divDataId=divId+jsonObj.dataId

        var dataDiv=$("#"+divDataId)  

        //如果元素存在，则改变代表个数的属性

        if(dataDiv!=null)

        {

            var dataNum=dataDiv.attr('num')  

            if(dataNum!=null&&dataNum>0)

            {    

                if(jsonObj.dataNum!=null&&jsonObj.dataNum>0){

                  if(jsonObj.dataName!=''&&jsonObj.dataName!=null){

                      dataNum=parseInt(dataNum)+parseInt(jsonObj.dataNum)

                  dataDiv.attr('num',dataNum)

                      var dataDivText=jsonObj.dataName+" "+dataNum   

                 dataDiv.text(dataDivText)

                  }

   

                }

            }else{//如果元素不存在，则直接追加

                appendHTMLDiv(jsonObj,allDivId)

            }

        }else{

            appendHTMLDiv(jsonObj,allDivId)   

        }

    }

}

//追加新元素

function appendHTMLDiv(jsonObj,allDivId)

{

    var allDataDiv=$("#"+allDivId)

    var divHtml="<div class='css_class' price='"+jsonObj.dataPrice+"'>"

    divHtml+="<div class='css_class1'><img src='"+jsonObj.dataUrl+"'"+ "alt='"+jsonObj.dataName+"'  width='69' height='62'/> </div>"

divHtml+="<div id='data_"+jsonObj.dataId+"' num='"+jsonObj.dataNum+"' price='"+jsonObj.dataPrice+"' class='css_class2'>"+ jsonObj.dataName+" "+jsonObj.dataNum +"</div>"

divHtml+="</div>"

    var newDataDiv=$(divHtml)

    var price=jsonObj.dataPrice

    var dataDivArray=allDataDiv.children()

    var insertDiv=null

    for(var i=0i<dataDivArray.lengthi++)

    {

        var dataPrice=dataDivArray[i].getAttribute("price")

        if(dataPrice<price)

        {

            insertDiv=dataDivArray[i]

            break

        }

    }

    if(insertDiv!=null)

    {

        newDataDiv.insertBefore(insertDiv)

    }

    else

    {

        allDataDiv.append(divHtml)

    }

}

上述代码实现：    使用jQuery实现动态添加元素功能；需要按照元素的某个属性排序，如果当前元素存在，则直接修改用于表示个数的属性，否则需要按照元素的一个属性查找到合适的位置，新建元素并插入

---