DOM中修改内容和创建节点

最新推荐文章于 2022-10-20 10:02:38 发布

yayun0516

最新推荐文章于 2022-10-20 10:02:38 发布

阅读量1.3k

点赞数

分类专栏： javaScript 文章标签： javascript html .createElement .getElementsByTagNam .appendChild

本文链接：https://blog.csdn.net/yayun0516/article/details/41594303

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

修改内容：

两个属性：

.html代码如下：

</pre><pre name="code" class="html">

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>内容修改</TITLE>
	<style type="text/css">
		.cnt{
			color:red;
			font-size:12pt;
			font-weight:bold;
		}
	</style>
	<script type="text/javascript">
		function changeValues(){
			var obj = document.getElementById("test");
			/*obj.innerText = "我是一个层";
			obj.className = "cnt";*/
			obj.innerHTML = "<span class='cnt'>我是一个层</span>"	}
	</script>
</HEAD>
<BODY οnlοad="changeValues()">
	<DIV id="test"></DIV>
</BODY>
</HTML>

</pre><pre name="code" class="html">

效果如下：

创建节点：

<!DOCTYPE HTML>
<html>
	<head>
		<title>创建节点</title>
		<style type="text/css">
			.content {
				color:red;
				font-weight:bold;
				font-size:12pt;
				
			}
		</style>
		<script type="text/javascript">
			function createNode(){
				var div = document.createElement("div");//创建一个层
				div.innerText = "我是一个层";
				div.className = "content";
				var body = document.getElementsByTagName("body")[0];//获取body，注意是数组
				body.appendChild(div);//添加子节点
			}
			
			function loadJS(url){
				var script = document.createElement("script");
				var head  = document.getElementsByTagName("head")[0];
				
				script.src = url;//获取src路径
				head.appendChild(script);
			}
		
		</script>
	</head>
	<body οnlοad="createNode()"> 
		<input type="button" value="第一个js" οnclick="loadJS('test.js')"/>
		<input type="button" value="第二个js" οnclick="loadJS('test2.js')"/>
	</body>
</html>

yayun0516

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM中修改内容和创建节点

修改内容：两个属性：.html代码如下：内容修改 .cnt{ color:red; font-size:12pt; font-weight:bold; } function changeValues(){ var obj = document.getElementById("test"); /*obj.inn
复制链接

扫一扫