js更改html内容

最新推荐文章于 2023-07-13 09:45:11 发布

BLADCS

最新推荐文章于 2023-07-13 09:45:11 发布

阅读量731

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/BLADCS/article/details/107452832

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript改html内容

document是文本对象。js要想修改html，就要写document。

这个官网的没找到，还是看菜鸟教程吧菜鸟javascript document。个人还是很喜欢菜鸟教程的。

document对象在HTML DOM（文档对象模型）里。DOM(Document Object Model)-文档对象模型。通过DOM，js就可以创建动态的HTML。

后台打印document文档对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗！</div>
<script>
/*document里的类容是整个html*/
    console.log(document);
</script>
</body>
</html>

下面改一个div块元素。
querySelector(“id”) 方法返回文档中匹配指定 CSS 选择器的一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗</div>
<script>
    //js改html只要改document就好了
	//js帮助文档https://www.runoob.com/jsref/dom-obj-document.html
    //document.querySelector("#two");
	var div=document.querySelector("#two");
    div.style.width="250px";
    div.style.height="250px";
    div.style.backgroundColor="yellow";
</script>
</body>
</html>

在追加一个更改文本的。也是document对象里的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗</div>
<script>
    //js改html只要改document就好了
	//js帮助文档https://www.runoob.com/jsref/dom-obj-document.html
	var div=document.getElementById("two");
	div.innerHTML="我可能很开心";
</script>
</body>
</html>

其实有了这个帮助文档，再有个引入门的开头后面的也没啥好说的。所以我不写了。。。

0.0

BLADCS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js更改html内容

js改html内容document是文本对象。js要想修改html，就要写document。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title></head><body><div class="box" id="father">123</div>
复制链接

扫一扫