js追加元素的几种方法

JavaScript06

js追加元素的几种方法,第1张

append() 方法在被选元素的结尾(在内部)插入指定内容。

如$("p").append(" <b>Hello world!</b>")

appendTo() 方法在被选元素的结尾(在内部)插入指定内容。

如:$("<b>Hello World!</b>").appendTo("p")

prepend() 方法在被选元素的开头插入内容。

如:$("p").prepend("Some prepended text.")

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

如$("img").after("Some text after")$("img").before("Some text before")

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、以追加name元素为例,在index.html的<script>标签中,输入js代码:

var names = ['Alice', 'Bob']

var json = []

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

json[i] = {'name' : names[i]}

}

document.body.innerText = JSON.stringify(json)

3、浏览器运行index.html页面,此时会打印出追加name元素后的json数组。

<script type="text/javascript">

var n=0

function addfile(){

var where="beforeend"

var str=''//元素

var el=document.getElementById('div的id')

where = where.toLowerCase()

if(el.insertAdjacentHTML){

switch(where){

case "beforeend":

el.insertAdjacentHTML('BeforeEnd', str)

return el.lastChild

}

throw 'Illegal insertion point ->"' + where + '"'

}

var range = el.ownerDocument.createRange()

var frag

switch(where){

case "beforeend":

if(el.lastChild){

range.setStartAfter(el.lastChild)

frag = range.createContextualFragment(str)

el.appendChild(frag)

return el.lastChild

}else{

el.innerHTML = str

return el.lastChild

}

}

throw 'Illegal insertion point ->"' + where + '"'

}

</script>

我这个只是一部分,完整的可以再<div id="qwrdg"> </div>任意部分添加