JavaScript进击之路（2）

最新推荐文章于 2024-09-11 15:33:18 发布

爵_J

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量217

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/baidu_34210678/article/details/72928851

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、DOM动态创建
1.传统的技术 document.write 和 innerHTML
*write方法

document.write("<p>This is new node</p>");

在界面新建一个p标签的内容
对于document.write()方法在外部js调用时，必须在body中引用外部js文件
*innerHTML
innerHTML属性可以读、写给定元素的HTML的内容
读取：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTMLDemo</title>
</head>
<body>
<div id = "innerTest">
<p>This is <em>my</em>story.</p>
</div>
<script>
var test = document.getElementById("innerTest");
alert(test.innerHTML);
</script>
</body>
</html>

写入：

var demo = document.getElementById("innerTest");
demo.innerHTML = "<p>new insert story</p>";

2.DOM更新文档方法（createElement、appendChild、createTextNode）
*createElement 创建元素

document.createElement("p");

*appendChild 插入新节点

var demo = document.getElementById("innerTest");
var test = document.createElement("p");
demo.appendChild(test);

*createTextNode 创建文本节点

var node = document.getElementById("innerTest");
var elem = document.createElement("p");
node.appendChild(elem);
var newNode = document.createTextNode("New TextContent");
elem.appendChild(newNode);

3.在已有元素前插入一个新的元素节点
*insertBefore()
其中parentElement为目标元素的父元素；targetElement为目标元素；newElement为新元素

parentElement.insertBefore(newElement,targetElement);

在DOM中未提供insertAfter()方法来在元素后添加一个新元素，但我们可以构造一个insertAfter()方法

function insertAfter(newElement，targetElement);

爵_J

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录