Heim > Web-Frontend > js-Tutorial > js 复制或插入Html的实现方法小结_javascript技巧

js 复制或插入Html的实现方法小结_javascript技巧

WBOY
Freigeben: 2016-05-16 18:26:57
Original
1032 Leute haben es durchsucht

var bq=document.getElementsByTagName("标签或ID名")//ID是唯一无许分组,标签非唯一,有可能返回一个数组.
div=document.createElement("div");
...设置CSS风格
bq.appendChild(div);//ID唯一性的话只需要这样!在bq之后插入div层
bq[0].appendChild(div);//如果前面用的是标签!数组跟下标!在bq之后插入div层
bq.insertBefore(div);//ID唯一性的话只需要这样!在bq之前插入div层
bq[0].insertBefore(div);//如果前面用的是标签!数组跟下标!在bq之前插入div层

document.getElementById('navition').style.cssText = '您的CSS代码';
//复制一个div
var bq=document.getElementById("Copy")//ID是唯一无许分组,标签非唯一,有可能返回一个数组.
objDiv=document.createElement("div");
objDiv.id=bq.id + Copy;
objDiv.style.position="absolute"
objDiv.style.left="200px"
objDiv.style.top="200px"
objDiv.innerHTML=bq.innerHTML;
bq.appendChild(objDiv);


test1 test2


test1 test2



在JS中可以使用:

test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是

test1 test2
test1 test2


test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。


test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是

test1 test2

test1 test2



完整示例:
复制代码 代码如下:


特别说明:

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用
innerHTML,而少用 innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含
HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
复制代码 代码如下:

一些相关的文章
javascript dom 操作详解 js加强
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage