脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript渲染页面

使用JavaScript渲染页面的方法详解

 更新时间：2023年12月17日 15:24:28   作者：小猫娃来啦  
本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧

首先，我们需要先获取html中的元素，然后才能考虑给元素添加内容或者动态效果

这是获取元素比较常见的选择器:

<script>
			document.getElementById('id')              //通过元素 id 来查找元素
			document.getElementsByTagName('name')      //通过标签名来查找元素
			document.getElementsByClassName('class')   //通过类名来查找元素
			document.getElementsByName('name')         //通过表单元素中 name 名查找元素
			document.querySelector('CSS 选择器')        //通过CSS 选择器获取匹配上的第一个元素
			document.querySelectorAll('CSS 选择器')     //通过 CSS 选择器获取匹配上的所有元素
</script>

其次，我们需要将我们想表达的内容通过JavaScript渲染到页面中

这是写入比较常见的办法：

1.document.write()

JS 中的输出语句，该语句会将内容输出到页面上，并且能够解析标签元素。

<script type="text/javascript">
document.write('<h1>哈喽！！！</h1>');
</script>

2.alert()

JS 中的警告弹框，该语句会将内容以弹窗的形式提示用户。

<script type="text/javascript">
alert('哈喽！！！');
</script>

3.元素.innerHTML = 内容

改变元素的内容（包含内部标签）可识别标签。

<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div>
<input type="text" id="inp" value="123" />
<div id="col"> 我是黑色 </div>
<script>
let content = document.getElementById('content');
content.innerHTML = "<h1>我是 H1 标签</h1>";
let inp = document.getElementById('inp');
inp.value = 456;
let col = document.getElementById('col');
col.style.backgroundColor = 'blue';
</script>

比方说，我们现在写一句   “学js真是一件开心的事”    渲染到页面，可以复制代码，自己运行一下。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学习</title>
</head>
<body>
	<div id="js">
		
	</div>
</body>
</html>
<script>
	let js = document.querySelector('#js');
	js.innerHTML='学习js真是一件开心的事'
</script>

作用，我们做一个简单的总结。JavaScript渲染页面的方法就是我们要懂得如何去获取一个元素，要明白如何将js里将我们想要的内容渲染到元素里，这样才是一个基本完整的渲染页面的办法。

以上就是使用JavaScript渲染页面的方法详解的详细内容，更多关于JavaScript渲染页面的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 使用JavaScript实现一个简易的热更新

    使用JavaScript实现一个简易的热更新

    热更新是指在应用程序运行时,对程序的部分内容进行更新,而无需重启整个应用程序,热更新是在不停止整个应用程序的情况下,将新的代码、资源或配置应用于正在运行的应用程序,本文讲给大家介绍一下使用JavaScript实现一个简易的热更新,需要的朋友可以参考下
    2023-08-08
  • javascript中的self和this用法小结

    javascript中的self和this用法小结

    本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • JavaScript中使用Substring删除字符串最后一个字符

    JavaScript中使用Substring删除字符串最后一个字符

    删除字符串最后一个字符的方法有很多，在本文将为大家介绍下js中的substring是如何做到的，需要的朋友可以参考下
    2013-11-11
  • Bootstrap实现水平排列的表单

    Bootstrap实现水平排列的表单

    这篇文章主要为大家详细介绍了Bootstrap实现水平排列的表单的相关代码，代码简洁，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript实现下载base64数据并兼容低版本

    JavaScript实现下载base64数据并兼容低版本

    这篇文章主要为大家详细介绍了如何使用JavaScript实现下载base64数据并兼容低版本,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • JS前端开发判断是否是手机端并跳转操作（小结）

    JS前端开发判断是否是手机端并跳转操作（小结）

    这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • JS沙箱模式实例分析

    JS沙箱模式实例分析

    这篇文章主要介绍了JS沙箱模式,结合实例形式分析了JS沙箱模式的原理与实现方法,需要的朋友可以参考下
    2017-09-09
  • js实现class样式的修改、添加及删除的方法

    js实现class样式的修改、添加及删除的方法

    这篇文章主要介绍了js实现class样式的修改、添加及删除的方法,主要通过修改标签的className来实现这一功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • javascript中如何快速获取数组最后一个值

    javascript中如何快速获取数组最后一个值

    这篇文章主要介绍了javascript中如何快速获取数组最后一个值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 使用JavaScript删除HTML元素的2种方法及3种情况

    使用JavaScript删除HTML元素的2种方法及3种情况

    给定一个HTML元素，如何使用JavaScript从文档中删除该HTML元素,这篇文章主要给大家介绍了关于使用JavaScript删除HTML元素的2种方法及3种情况,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论