关于insertAdjacentHTML的一些知识点

<div id="container">
  <h2>hahah</h2>
  <h3>quuquq</h3>
  <div class="inner">hello</div>
  <div class="inner">world</div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

  document.getElementById("container").insertAdjacentHTML("AfterEnd","<div>嘿嘿嘿</div>");
//在container后面添加
  document.getElementById("container").insertAdjacentHTML("BeforeEnd","<div>哈哈哈</div>");
//在container元素的最后一个节点的后面;
  document.getElementById("container").insertAdjacentHTML("afterBegin","<div>呜呜呜</div>");
//在container 元素的第一个节点前面添加
document.getElementById("container").insertAdjacentHTML("BeforeBegin","<div>啊啊啊</div>");
//在container 元素的前面添加
//js中获取元素内部的html
alert(document.getElementById("container").innerHTML);
//得到的结果是:
//<h2>hahah</h2>
// <div class="inner">hello</div>
// <div class="inner">world</div>

//添加节点
var ul = document.createElement("ul");
var li = document.createElement("li");
var text = document.createTextNode("hahha");
li.appendChild(text);
ul.appendChild(li);
document.getElementById("container").appendChild(ul);
//在元素之前添加
$(".inner").prepend("<br><a href=‘‘>test</a>");
//在元素后面添加
$(".inner").append("<br><a href=‘‘>text</a>");
//在元素之前插入
//$(".inner").insertBefore($("h3"));
$("h3").before($(".inner"));
//在元素之后插入
$("h2").after($(".inner"));

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
//· createDocumentFragment():    创建文档碎片节点
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Firefox", "Safari",
"Chrome", "Opera"];

browserList.forEach(function(e) {
var li = document.createElement("li");
li.textContent = e;
docfrag.appendChild(li);
});

ul.appendChild(docfrag);
</script>
</html>

时间: 2024-10-13 22:22:06

关于insertAdjacentHTML的一些知识点的相关文章

Javascript的一些小知识点

小弟五一回家去了,本想好好的享受下五一假期,谁知悲剧的人生不需要解释.好不容易过五关斩十将,跨千山趟万水,回到家里.吃着老妈做的好菜,第二天就莫名其妙的急性肠炎,这肚子闹腾的.NND,气死哥了,早知道就不回家了.好了,废话不多说,进入主题. ================ 关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏

H5移动端知识点总结

移动开发基本知识点 一. 使用rem作为单位html { font-size: 100px; }@media(min-width: 320px) { html { font-size: 100px; } }@media(min-width: 360px) { html { font-size: 112.5px; } }@media(min-width: 400px) { html { font-size: 125px; } }@media(min-width: 640px) { html { f

Spring知识点回顾(01)

Spring知识点回顾(01) 一.依赖注入 1.声明Bean的注解 @Component @Service @Repository @Controller 2.注入Bean的注解 @Autowired @Inject @Resource 二.加载Bean 1.xml方式 - applicationcontext.xml : Beans, Bean, Component-Scan 2.注解方式 - @Configuration,@ComponentScan,@Bean 用@Configurati

Javascript易错知识点

? JS易错知识点总结: == 和 === 的区别: ==:判断两个变量的值是否相等. ===:判断两个变量的类型和值是否都相等,两个条件同时满足时,表达式为True. switch中break的作用: 如果一个case后面的语句,没有写break,那么程序会向下执行,而不会退出: 例如:当满足条件的case 2下面没有break时,case 3也会执行 1 var num = 2; 2 switch(num){ 3 case 1: 4 alert('case 1'); 5 break; 6 c

老男孩教育每日一题-2017年5月11-基础知识点: linux系统中监听端口概念是什么?

1.题目 老男孩教育每日一题-2017年5月11-基础知识点:linux系统中监听端口概念是什么? 2.参考答案 监听端口的概念涉及到网络概念与TCP状态集转化概念,可能比较复杂不便理解,可以按照下图简单进行理解? 将整个服务器操作系统比喻作为一个别墅 服务器上的每一个网卡比作是别墅中每间房间 服务器网卡上配置的IP地址比喻作为房间中每个人 而房间里面人的耳朵就好比是监听的端口 当默认采用监听0.0.0.0地址时,表示房间中的每个人都竖起耳朵等待别墅外面的人呼唤当别墅外面的用户向房间1的人呼喊时

JavaScript一些重要知识点结合题目的表现!

function Foo() { //① 声明一个Foo的函数 getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; ② 为Foo创建一个叫getName的静态属性存储一个匿名函数 Foo.prototype.getName = function () { alert (3);}; ③为Foo的原型对象创建一个叫getName的匿名函数 var getName =

学完了js的知识,一起分享总结知识点

又一个知识点学完了,到了总结学习效果和知识总结的时间了.js这个编程语言相对于html和css的逻辑性要强一些,也比较不容易上手.概念性的知识点不难理解,就是实际的操作并不容易,需要通过学习和借鉴案列来理解和帮助并提高实践操作的能力,把理论知识更好的结合到实践当中去,这样才能更有利于去理解和提高自己,做到知识的真正转化,缺乏理论概念性的支撑,有时真的很难上手,尤其是对于刚学习新手而言.所以需要总结知识点,大家可以互相分享一下学习的方式方法,知识总结,通过这种方式方法,相信可以有效的帮助解决一些学

C#高级知识点概要(1) - 委托和事件

作者:linybo 要成为大牛,必然要有扎实的基本功,不然时间再长项目再多也很难有大的提升.本系列讲的C# 高级知识点,是非常值得去撑握的,不仅可以让你写代码时游刃有余,而且去研究和学习一些开源项目时,也不会显得那么吃力了. 希望大家记住,这里讲的所有的知识点,不仅仅是了解了就可以了,还要会灵活用,一定要多思考,撑握其中的编程思想. 本文讲的是委托和事件,这两个词可能你早就耳熟能详,但你是否真正撑握了呢? 本系列讲的C#高级知识点都是要求开发时能达到可以徒手写出来的水平(不依赖搜索引擎.找笔记等

关于Less,你必知的知识点

这是一篇关于Less学习教程 http://www.maiziedu.com/course/497/,讲解了Less的语法,Less的混合等知识点. 1. 关于 less sass 的预编译处理器 LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行. less 编译使用前期使用koala 编译 2. less的 语法 A): 注