脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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渲染页面的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • uni-app如何页面传参数的几种方法总结

    uni-app如何页面传参数的几种方法总结

    这篇文章主要介绍了uni-app如何页面传参数的几种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js tab栏切换代码实例解析

    js tab栏切换代码实例解析

    这篇文章主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 前端开发之JS生成32位随机数的方法举例

    前端开发之JS生成32位随机数的方法举例

    最近有个需求,是需要生成32位长度的随机数,下面这篇文章主要给大家介绍了关于前端开发之JS生成32位随机数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • bootstrap表格分页实例讲解

    bootstrap表格分页实例讲解

    这篇文章主要为大家详细介绍了bootstrap表格分页实例讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js如何打印object对象

    js如何打印object对象

    这篇文章主要介绍了js如何打印object对象，需要的朋友可以参考下
    2015-10-10
  • javascript属性访问表达式用法分析

    javascript属性访问表达式用法分析

    这篇文章主要介绍了javascript属性访问表达式用法,实例分析了javascript属性访问表达式的功能与使用方法,需要的朋友可以参考下
    2015-04-04
  • JavaScript 语法集锦 脚本之家基础推荐

    JavaScript 语法集锦 脚本之家基础推荐

    JavaScript语法集锦是对javascript常用函数的一些小结，比较实用，建议收藏，方便查找需要的资料。
    2009-11-11
  • JavaScript中变量提升导致未定义(undefined)的问题及解决方法

    JavaScript中变量提升导致未定义(undefined)的问题及解决方法

    在 JavaScript 中,变量提升（Hoisting）是一个相对常见的行为,尤其是当你遇到 undefined 错误时,本文将详细探讨变量提升的概念、其对代码执行的影响以及如何避免因为变量提升而导致 undefined 的问题,需要的朋友可以参考下
    2024-09-09
  • 浅谈js闭包理解

    浅谈js闭包理解

    这篇文章主要介绍了对js闭包理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 基于canvasJS在PHP中制作动态图表

    基于canvasJS在PHP中制作动态图表

    这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论