document.write()

这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。

<!-- 省略部分代码 -->
<body><div>我是div标签里的内容</div><p>我是p标签里的内容</p><button>点击</button></br><script>document.write("我在页面加载期间通过write()方法写入");document.querySelector('button').addEventListener('click', function() {document.write("我通过点击按钮写入，并且覆盖了页面所有内容！");})</script>
</body>

执行结果：

Element.innerText()

这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。

<body><button>点击</button></br><p>我是p标签里的内容</p><div>我是div标签里的内容</div><script>document.querySelector('button').addEventListener('click', function() {document.querySelector('p').innerText = "我是p标签里的内容";document.querySelector('div').innerText = "<span>我向div标签里添加了span标签</span>";});</script>
</body>

执行结果：

Element.innerHTML()

这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。

// 修改上面的代码
document.querySelector('button').addEventListener('click', function() {document.querySelector('p').innerHTML = "我是p标签里的内容";document.querySelector('div').innerHTML = "<span>我向div标签里添加了span标签</span>";
});

执行结果：

document.createElement()

使用这个方法创建的元素，需要通过 appendChild()、insertBefore() 或 replaceChild() 方法添加到指定的文档树节点中，不会覆盖原有的元素。

<body><button>点击</button></br><p>我是p标签里的内容</p><div>我是div标签里的内容</div><script>document.querySelector('button').addEventListener('click', function() {let span = document.createElement('span');span.innerHTML = "我是创建的span节点，会被添加到div标签中。";document.querySelector('div').appendChild(document.createElement('br'));document.querySelector('div').appendChild(span);});</script>
</body>

执行结果：

JavaScript动态创建网页内容的几种方法相关推荐

JS动态创建元素（两种方法）
前言创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
ABAP中创建动态内表的三种方法（转载）
BAP中创建动态内表的三种方法第一种: 如果我们需要的动态内表字段或者动态工作区和数据字典中的类型一致,可以直接使用CREATE DATA生成,当然也可以是自定义类型. 比如要产生和数据表MARA结 ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
javascript中如何创建数组-与创建数组的几种方法
javascript中数组的创建方式有3种,我只学了3种,还有没有其他方法我也不知道哈.... 下面我们来看看 js中创建数组的其中一种方法. //先写一种最常规的的创建JS数组的方法 var arr ...
javascript动态创建可拖动、最大化、最小化的层
javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...
QT通过JavaScript动态创建QML对象
QT通过JavaScript动态创建QML对象通过JavaScript动态创建QML对象动态创建对象动态创建组件从QML字符串创建对象维护动态创建的对象动态删除对象通过JavaScrip ...
javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

JavaScript动态创建网页内容的几种方法

document.write()

Element.innerText()

Element.innerHTML()

document.createElement()

JavaScript动态创建网页内容的几种方法相关推荐

最新文章

热门文章