05 JavaScript DOM技术-动态创建标记

最新推荐文章于 2019-09-21 12:51:55 发布

鸿雁南去情难寄

最新推荐文章于 2019-09-21 12:51:55 发布

阅读量222

点赞数 2

分类专栏： JavaScript 文章标签： dom 创建标签

本文链接：https://blog.csdn.net/qq_42873753/article/details/86741203

版权

JavaScript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

动态创建标记

一，传统方式

1，document.write方法

该方式是快捷的把字符串插入到文档里

<body>
	<script>
		document.write("<p>this is document.write</p>");
	</script>
</body>

该方式的最大的缺点是它违背了“行为与表现分离”的原则，即使把该语句转移到外部函数，但也需要在body部分使用script标签才能调用哪个外部函数

2，innerHTML属性

该属性包含于HTML5规范里，该属性可以用于读、写某个给定元素里的HTML内容

<html>
  <head>
  
    <script>
      //向目标div添加内容的匿名函数
      window.onload = function(){
      var testdiv = document.getElementById("testdiv");
      testdiv.innerHTML = "<p>this is innerHTML</p>";
      }
    </script>
    
  </head>
  
    <body>
      <div id="testdiv"></div>//待添加内容的div
    </body>
    
</html>

该方式在文档创建的内容基本是整体的，无法处理过于细节的操作，但比document.write()方式相比较下优雅一些

二，DOM方式

1，createElement方法

该方法用于创建新的元素节点

语法：

document.createElement(nodeName);

2，appendChild方法

该方法用于将新创建的节点插入目标节点中

语法：

parent.appendChild(child);

3，createTextNode方法

该方法用于创建一个文本结点，其方法参数为要插入的文本字符串

语法：

document.createTextNode(text);

示例：

<html>

<head>
  <script>
    window.onload = function(){
      var para = document.createElement("p");//创建p元素节点
      var testdiv = document.getElementById("testdiv");//获取文档的div的id
      testdiv.appendChild(para);//将p元素节点插入div中，即p是div的子元素
      var txt = document.createTestNode("this is a Deom");//创建文本节点
      para.appendChild(txt);//将文本节点插入p元素中
    } 
  </script>
</head>

<body>
<div id="testdiv"></div>
</body>

</html>

4，insertBefore()方法

该方法用于将新元素插入到目标元素的之前

语法：

	parentElement.insertBefore(newElement,targetElement);

实质上parentElement的值就是targetElement元素的parentNode属性值

鸿雁南去情难寄

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录