如何用js 在div内插入内容

JavaScript011

如何用js 在div内插入内容,第1张

思路:先获取div对象,然后用innerHTML属性设置内容。当div用id属性标识时,可以直接用document.getElementById()获取;当div是用其他属性(如name,class)标识,就需要使用document.getElementsByTagName()获取对象,然后循环判断属性进行筛选。

下面实例演示根据div的class设置div的内容:

1、HTML结构

<div class="test"></div>

<input type="text" id="test"/><input type='button' value='发送' onclick="fun()"/>

2、javascript代码

function fun(){

    var str = document.getElementById("test").value

    var divs = document.getElementsByTagName("div")

    for(i=0i<divs.lengthi++){

        if(divs[i].className == "test"){

            divs[i].innerHTML += "" +str

        }

    }

}

获取div里头的内容,直接结合jq获取,给div添加个id,使用$("#div").text()可以获取到指定的div里头的文本内容。

如果是要传输到其他页面,采用ajax异步传输,将获取到的内容传递过去。

$.get("/xxx.jsp?txt="+$("#div").text(), function(result){alert(result)//传输到其他页面处理完,返回所需值。})

JSP可用一种简单易懂的等式表示为:HTML+Java+javascript=JSP。

JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。

Div 全称 division 意为“区分”,是HTML中的一个标签。你在HTML中可以理解为就是一个层。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 。 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P>是一样的。

javascript添加与前div相同的内容并且放在前div的后面的完整解决方法是:创建元素、插入元素完成要求。

完整处理代码是:

<div id=”divs”>。

<div id=”div1″>div1</div>。

<div id=”div2″>div2</div>。

</div>。

<script>。

var oDivs=document.getElementById(‘divs’)。

var oDiv2=document.getElementById(‘div2′)//获取到div2,因为等下要把创建的div插入到div2前面。

var oDiv3=document.createElement(‘div’)//创建一个div元素。

oDiv3.id=’div3′//id样式可以先在样式表中写好,然后赋值一个id给创建出来的div元素。

oDiv3.innerHTML=’<span>这是被创建出来的div3</span>’//给创建出来的div添加内容,内容中可以有html标签嵌套。

oDivs.insertBefore(oDiv3,oDiv2)//在大的div元素下插入创建出来的元素,第一个参数是创建的div,第二个参数是要插入到哪个div前面。

oDivs.insertBefore(oDiv3,oDiv2.nextSibling)//在大的div元素下插入创建出来的元素,第一个参数是创建的div,第二个参数是要插入到哪个div后面。

javascript在指定的元素前或后插入新元素的方法是:

insertBefore()方法,可以实现把一个新元素插入到现在元素的前面,与现有元素形成兄弟关系。

1、新元素,你想插入的新元素(newElement)。

2、目标元素,你想把新元素插入到哪个元素的前面(targetELement)。

3、父元素,目标元素的父元素(parentElement)。

语法是:parentElement.insertBefore(newElement,targetElement)。