JavaScript DOM 向文档添加新的元素

使用document.createElement创建新元素；

使用appendChild()添加到已有元素；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{width: 400px;height: 400px;border:1px solid #000}</style></head><body>    <div id="div1"></div>        <script type="text/javascript">var para = document.createElement("p");var node = document.createTextNode("这是一个段落XXX。");para.appendChild(node);var para2 = document.createElement("p");var node2 = document.createTextNode("这是另外一个段落XXX。");para2.appendChild(node2);var e = document.createElement("input");e.type = "button";e.value = "这是DOM的小例子";var e2 = document.createElement("select");e2.options[0] = new Option("加载项1", "");e2.options[1] = new Option("加载项2", "");e2.size = "2";var element = document.getElementById("div1");element.appendChild(para);element.appendChild(e);element.appendChild(para2);element.appendChild(e2);</script></body>
</html>

document.createTextNode 创建一个文本节点；

运行如下；

JavaScript DOM 向文档添加新的元素相关推荐

应用DOM操作文档的一个实用例子
DOM(Document Object Model)是表示文档(如HTML文档)和访问.操作说清楚文档的各种元素(如HTML标记和文本串)的应用程序接口(API).在DOM中,HTML文档中的各个节点 ...
javascript 中文帮助文档_实战式方法学习JavaScript（1）
案例1:表格行悬停提示效果 [参考文献] 1.JavaScript前端开发模块化教材(人民邮电出版社)赵健保 2.https://www.w3cschool.cn/ 任务导入: 在Web标准中,HTM ...
使用免费组件给PDF文档添加文本和图片页眉
C#/.NET 使用免费组件给PDF文档添加文本和图片页眉如今PDF文档与Office文档一样成为了一种通用文档,在日常工作中我们经常会碰到需要给PDF文件添加页眉和页脚/页码等情况,如果你正好是喜 ...
计算机给文字填充颜色,如何将电脑word文档中新录入的文字设置为不同的颜色...
如何将电脑word文档中新录入的文字设置为不同的颜色腾讯视频/爱奇艺/优酷/外卖充值4折起当我们在使用电脑的时候,一般都会用到word软件来处理文档,如果想要将新录入的文字设置为与旧文字不同的颜 ...
C# 如何给现有/新建PDF文档添加注释或标注
这篇文章主要介绍如何使用免费版PDF组件Free Spire.PDF及C#编程语言给现有PDF文档或新建的PDF文档中的文本添加注释或标注(完整代码附在文章末尾). 首先,下载 Free Spire. ...
java给word和pdf文档添加二维码
背景目前收到一个需求,需要给上传的word和pdf文档添加二维码,防止职工给领导签字时伪造合同,所以提出这个需求,上传的word和pdf添加二维码,然后使用我们的app扫码查看相关的信息. 解决方案 ...
elementui表格添加滚动条_如何给PDF文档添加超链接？
有时我们在编辑PDF文档时,需要给目录做快速跳转或给文中的某些内容跳转到其他网页,这就需要用到超链接的功能.下面就一起看看给PDF文档添加超链接的是如何操作的. https://www.zhihu.c ...
word样式基准_「word技巧」简单的排版技巧—给word文档添加各种样式边框线
一直在说排版,但一篇word文档到底怎么排版才好看?这涉及到很多方面的技巧. 不过,有时候,一个很简单或是不起眼的小动作,有可能就会让整个word文档显得高大上起来. 比如说,给文档随意添加个边框线, ...
JavaScript读写.txt文档 - 方法篇
JavaScript读写.txt文档:分析与方法详情参考完整教程: Javascript本地写入txt和读取txt文件示例案例篇:求HTML或者JS读取TXT文件内容的代码以上就是关于 &quo ...

JavaScript DOM 向文档添加新的元素

JavaScript DOM 向文档添加新的元素相关推荐

最新文章

热门文章