JavaScript 动态创建标记

网页的结构由标记负责创建，JavaScript函数只用来改某些细节而不改变其底层结构，js也可用来改变网页的结构和内容：

传统方法：1.document.write 快捷将文档插入到网页中：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>text</title>
 6 </head>
 7 <body>
 8     <script>
 9         document.write("<p> This is inserted.</p>");
10     </script>
11 </body>
12 </html>

但是违背了“行为应该与表现分离”的原则，不建议使用；

2.innerHTML属性：可以用来读写某给定元素的HTML内容，标准化的DOM像手术刀一样精细，二innerHTML属性则像一把大锤一样粗放：

 1 <!DOCTYPE html>//test.html
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>text</title>
 6 </head>
 7 <body>
 8     <script>
 9         document.write("<p> This is inserted.</p>");
10     </script>
11     <div id="testdiv">
12     <p id="yourbody">This is <em>my</em> content.</p>
13     </div>
14     <script type="text/javascript" src="example.js"></script>
15 </body>
16 </html>

1 window.onload = function(){//examlple.js
2     //if (document.getElementById("testdiv")) alert("get testdiv");
3     var testdiv = document.getElementById("testdiv");
4     alert(testdiv.innerHTML);
5
6     //if (document.getElementById("yourbody")) alert("get yourbody");
7     var testid = document.getElementById("yourbody");
8     alert(testid.innerHTML);
9 }

innerHTML不仅可以用来读取元素的HTML内容，还可以用它把HTML内容写入元素，如下所示：

1 window.onload = function() {
2     var testdiv = document.getElementById("testdiv");
3     testdiv.innerHTML = "<p>You know what? <em>I can change your life!<em></p>";
4 }
5 //在js里添加function修改id=testdiv的元素的HTML内容

3.DOM方法：在浏览器看来，DOM节点树才是文档，在DOM看来，一个文档就是一个节点树。

将一段文本插入到testdiv元素中：1、创建一个新的元素，2、把新元素插入节点树

1 window.onload = function() {
2     var para = document.createElement("p");//创建元素节点
3     var testdir = document.getElementById("testdiv");
4     testdir.appendChild(para);
5     var txt = document.createTextNode("You know that! <em>I can change your life!</em>");//创建文本节点
6     para.appendChild(txt);
7 }

转载于:https://www.cnblogs.com/2014-cjs/p/3648473.html

JavaScript 动态创建标记相关推荐

动态创建标记+css_dom+js动态效果
[7]动态创建标记 [7.1]一些传统方法 [7.1.1]document.write方法,不推荐使用 (1) <!DOCTYPE html> <html lang="en ...
javascript动态创建可拖动、最大化、最小化的层
javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...
QT通过JavaScript动态创建QML对象
QT通过JavaScript动态创建QML对象通过JavaScript动态创建QML对象动态创建对象动态创建组件从QML字符串创建对象维护动态创建的对象动态删除对象通过JavaScrip ...
Javascript动态创建SVG圆弧
Javascript动态创建SVG圆弧 0. 起源需要做一个展示统计数据(百分比)的小部件,默认情况下该小部件是隐藏的.页面右边放置一个圆形的按钮,当点击按钮时小部件从右边滑出显示. 本着尽可能多的 ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
javascript动态创建radio button元素支持IE/Firefox
我们都知道在IE中创建表单元素可以有三种方式 var oInput = document.createElement("input"); var oInput = document ...

JavaScript 动态创建标记

JavaScript 动态创建标记相关推荐

最新文章

热门文章