javaScript操作在html中写入标签和内容

最新推荐文章于 2021-07-10 13:08:44 发布
最新推荐文章于 2021-07-10 13:08:44 发布
阅读量1.7w 收藏 30
点赞数 7
分类专栏： # javaScript 文章标签： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guesshat/article/details/107430278
版权

javaScript操作在html中写入标签和内容

1.写入标签innerHTML

在id为box的div标签中写入一个span标签，这里需要注意的是，写入不是增加，而是替换，会覆盖原来的内容，也就是说原来标签内的内容全部都没有了

			var box = document.getElementById("box")
			box.innerHTML="<span>456</span>"

2.写入内容innerText

这里也是将内容覆盖，而不是添加

			var box = document.getElementById("s")
			box.innerText="456"

如果想添加，解决办法是：利用拼接

			var box = document.getElementById("s")
			box.innerText=box.innerText+"456"；

3.在一个标签内增加标签 appendChild

默认添加在父标签的最后

这里需要先创建一个标签元素，用到的方法是document.createElement
创建一个span标签
var span = document.createElement("span")
写入内容
span.innerText = "123"
添加到父标签中
box.appendChild(span)

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<img src=""/>
			<p class="PPP"><span id="s">789</span></p>
		</div>
		
		<script type="text/javascript">
			var box = document.getElementById("box")
			var span = document.createElement("span")
			span.innerText = "123"
			box.appendChild(span)

		</script>
	</body>
</html>
GuessHat
关注
  • 7
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript写入_如何在JavaScript中写入HTML元素？
cumtb2002的博客
07-02 2817
javascript写入 写入HTML元素 (Writing into an HTML element) To write string/text into an HTML element, we use the following things: 要将字符串/文本写入HTML元素，我们使用以下内容： There must be an HTML element like paragraph, ...
JavaScript中读取和保存文件实例
12-01
话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。 首先说读取文件。W3C提供了一些File API，其中最重要的是FileReader这个类。 先列出需要用到的HTML标签： 代码如下:<input type=”file” id=”file” onchange=”handleFiles(this.files)”/>当选择了一个文件时，
js怎样向html中添加内容,使用js向网页中写入html内容
weixin_39663729的博客
06-09 5457
前言js可以向网页中写入html内容，方法是调用write方法向document的节点中写入html元素以下展示两个实例实例1.在网页上写入一个标题为hello的元素document.write(" hello ")效果如图：2.在网页上写入一个九九乘法表document.write("")for(var i=1;i<=9; i++){document.write("")for(var j=...
js 将html插入指定元素中
HelloKitty520123的专栏
11-17 619
一定要先定义一个空的html。。。
在html中添加script脚本的2种方法和注意事项
01-21
在html中添加[removed]脚本的方法： 1、可以直接将javascript代码添加到html中 复制代码代码如下: [removed] //javascritp代码 [removed] 当解释器嵌入[removed]代码时，html页面的处理也会被暂时停止。 2、添加外部js文件 复制代码代码如下: [removed][removed] 注意事项：① 在XHTML文档中，可以省略[removed]标签，例如： 复制代码代码如下: <script type=”t
JavaScript学习笔记——如何将JavaScript代码加入网页（＜script＞标签）
Insomnia_X的博客
07-10 3082
如何将JavaScript代码加入网页 如何将JavaScript代码加入网页？——使用<script>元素 HTML文件中包含众多元素，如<html>、<head>、<script>、<body>等 使用<script>标签将JavaScript代码添加到网页的<head>或<body>元素中 方法一：使用<script>将代码嵌入<head>元素中 这是常见的方式，能让代码更容易找到，
原生html使用循环,原生javascript学习：用循环改变div颜色
weixin_29486701的博客
05-31 547
在使用javascript过程中，想循环遍历一个数组，经常使用的语法有两种：for (var i; i < array.length; i++) {statement;}for (var i in array) {statement;}这两种用法看起来能做同样的事情，但实际上两个循环的循环次数一般是不一样的。源码如下：#button{text-align:center;}#outer{wid...
js动态创建html标签
yeagoodidea的专栏
10-13 1763
<br /><script language="javascript"><br />var div = document.createElement("div");<br />/*<br />div.style.border = "1px red solid";<br />div.style.width = "100px";<br />div.style.height = "100px";<br />*/<br />div.className = "div";<br />div.innerHTML = "<
HTML js for循环实现多个div
breakCSDN的博客
10-30 6990
HTML有时会写大概相同的超多div，费时费力。在这里记一下使用js实现的小技巧。
html动态生成tr标签,JS动态添加tr元素
weixin_39905500的博客
06-10 1023
tr1:是否testfunction addDiv(){//创建行var tr=document.createElement("tr");//newNode.setAttribute("id","a3");//创建第一个单元格var td = document.createElement("td");var tdContent = document.createTextNode("xx...
binlingo:用JavaScript讲二进制！ 用TypeScript编写的二进制读取器和写入器实用程序
03-26
宾林哥 二进制读取器和写入器使使用JavaScript变得容易。 安装 对于Node.js或webpack项目，请使用NPM软件包管理器进行安装： npm install --save binlingo 要在没有捆绑程序的浏览器中使用，请在HTML中包含此脚本标签。 < script src =" https://unpkg.com/[email protected]/dist/binlingo.js " > </ script > 用法 // commonjs module const { Reader , Writer } = require ( 'binlingo' ) // esmodules import { Reader , Writer } from 'binlingo' // in the browser const { Reader , Writer } = windo
sagen.js:JavaScript 设备检测器，视口写入和重写
05-29
Sagen.js 设备检测器，视口写入和重写 根据html标签中的终端信息编写CSS类。 来自原始想法。 API 文档 如何使用 [removed] [removed] 请在指定视口后链接脚本。 id：设置为sagen 。 [必需] id # sagen 标准（默认） SP终端判断iphone, ipad, ipod, 手机, 平板电脑 SP OS判断ios, 安卓, ios_OS_VERSION, android_OS_VERSION SP浏览器判断Safar
smartvisu:smartVISU是一个框架，用于为带有简单html页面的knx安装创建可视化。 要读取和写入组电报，请使用特殊标签
04-29
smartVISU 描述 smartVISU是一个框架，用于为带有简单html页面的knx安装创建可视化。 要读取和写入组电报，请使用特殊标签。 您不需要了解javascript。 查看： 特征 漂亮：响应式设计，可针对智能手机和平板电脑进行自动调整 严格：适用于所有设备的一个模板 轻松：使用HTML5实施 简单：使用直接在HTML中的命令连接到KNX 通用：小部件的小概念 可连接：将驱动程序用于不同的KNX安装 系统要求 IP网络，KNX总线 ， ， ， ， 或 （不推荐使用： ）后端或JSON接口 使用PHP的Web服务器。 我们强烈建议您使用PHP 7.2及更高版本，因为较旧的版本已过期，并且不再获得任何安全更新。 Quad设计中的某些功能明​​确需要PHP 7.2+ Firefox，Chrome，IE，Safari，iPhone，iPad，Android Phon
zollty-tmpl:具有JavaScript的快速字符串（和HTML）模板引擎
05-22
zollty-tmpl.js 具有JavaScriptHTML或字符串模板引擎 特征 速度快，体积小且没有依赖性。 支持包括内部模板。 支持json，array和任何js对象作为渲染数据。...或仅将模板内容写入文件中： <h1>{{title}} <ul>
javaScript中获取Html标签元素的方法
GuessHat的博客
07-18 5507
javaScript中获取Html标签元素的方法 js可以对html中标签的属性和内容进行操作，也可以动态创建，为拿到对应标签，可以通过下面几个方法： 1.通过标签ID var span = document.getElementById("ID名") 2.通过name值 var span = document.getElementsByName("name值") 3.通过className 这里注意通过className拿到的是一个集合，因为不知道整个网页中具体有多少个，所以将结果做了封装，需要通过下标获
javaScript中动态创建一个标签
GuessHat的博客
07-18 3759
javaScript中动态创建一个标签 创建一个span标签 var span = document.createElement("span") 写入内容 span.innerText = "123" 添加到父标签中 box.appendChild(span) 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </hea
javaScript中定时&定时循环方法
GuessHat的博客
07-18 2559
javaScript中定时&定时循环方法 1.setInterval(要执行的代码，间隔时间数) 按照指定周期调用，调用时间数是毫秒级 案例： 在浏览器上显示时间，并且每过一秒更新一下时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <span>&
图片停留三秒&点击关闭后消失javaScript案例
GuessHat的博客
07-17 1301
图片停留三秒&点击关闭后消失javaScript案例 使用图片地址：https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3934837541,1515601765&fm=26&gp=0.jpg <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &
JavaScript 写在html的哪个标签里面
最新发布
06-06
JavaScript 代码可以写在 HTML 文档的多个位置，主要包括以下几种： 1. 在 head 标签中的 script 标签中写入 JavaScript 代码。这种方式通常用于定义全局变量、函数或者加载外部 JavaScript 文件。例如： ``` <!DOCTYPE html> <html> <head> <title>My Page</title> <script src="myscript.js"></script> <script> function myFunction() { // do something } </script> </head> <body> <!-- HTML content --> </body> </html> ``` 2. 在 body 标签中的 script 标签中写入 JavaScript 代码。这种方式通常用于在页面加载后执行 JavaScript 代码。例如： ``` <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <!-- HTML content --> <script> document.getElementById("myButton").addEventListener("click", function() { // do something }); </script> </body> </html> ``` 3. 在 HTML 元素的事件属性中写入 JavaScript 代码。例如： ``` <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <button onclick="myFunction()">Click me</button> <script> function myFunction() { // do something } </script> </body> </html> ``` 以上是常见的几种写 JavaScript 代码的方式，您可以根据具体的需求选择相应的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值