在HTML5中，你可以通过多种方式给元素添加内容，最直接的方式是在HTML标记中直接写入内容-CSDN博客

本文链接：https://blog.csdn.net/blog_programb/article/details/107104250

在HTML5中，你可以通过多种方式给元素添加内容。最直接的方式是在HTML标记中直接写入内容，但你也可以使用JavaScript来动态地添加内容。下面我将展示这两种方法。

方法1：直接在HTML标记中添加内容
这是最简单的方法，直接在HTML元素的开始和结束标记之间写入内容。

html

添加内容示例

这是一些内容。

在这个例子中，

元素包含了文本“这是一些内容。”。

方法2：使用JavaScript添加内容
如果你想动态地添加内容，或者在用户交互后添加内容，你可以使用JavaScript。

示例1：添加文本内容
使用innerHTML属性可以添加或替换元素的内容。

html

使用JavaScript添加内容

在这个例子中，JavaScript代码首先通过getElementById方法获取了

元素的引用，然后使用innerHTML属性将文本内容添加到该元素中。

示例2：添加HTML内容
innerHTML属性也可以用来添加HTML标记和内容。

html

使用JavaScript添加HTML内容

在这个例子中，通过innerHTML添加了两个段落元素到

中。

示例3：使用textContent或innerText添加纯文本
如果你只想添加纯文本，而不解析任何HTML标记，可以使用textContent或innerText属性。

html

使用JavaScript添加纯文本内容

在这个例子中，尝试将包含HTML标记的字符串作为纯文本添加到

中，标记不会被浏览器解析为HTML元素。 - content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 - 该属性用于定义元素之前或之后放置的生成内容。 - 默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>添加content内容</title>
<style type="text/css">
#nav {
	margin:20px auto;
	width:200px;
	border:1px solid #f90;
	padding:20px;
	line-height:22px;
	font-size:18px;
}
#nav a {
	display:block;
	font-size:12px;
	line-height:22px;
	color:#00F;
}
/* 筛选链接地址，添加不同的内容 */
a[href$=html]:before {
 content:"网页：";
}
a[href$=jpg]:before {
 content:"图片：";
}
a[href$=doc]:before {
 content:"Word文档：";
}
a[href$=pdf]:before {
 content:url("images/pdf.gif");
}
</style>
</head>
<body>
<div id="nav"><a href="images/Code4-5.html">登录页面</a> <a href="images/IL5.jpg">杭州风光</a> <a href="images/test.doc">参考资料</a> <a href="images/Pattern.pdf">设计模式培训</a> </div>
</body>
</html>