如何使用js添加html标签

其实很简单，只需要以下几个步骤：
1.使用getElementById获取想要写的标签的父标签对象（body除外，当然body也可以获取，当时没必要，因为他可以通过document.body直接调用）
2.使用createElement创建标签对象
3.设置标签的属性和文本信息
4.使用步骤1获取到的父标签对象的appendChild方法添加标签

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*所有li标签都适用*/li{color:orangered;}</style><script type="text/javascript">window.onload = function () {//在body中添加标签//添加div元素(在内存中)let divObj = document.createElement('div');divObj.innerHTML = "我是js添加的文字";//把div添加到body作为他的子元素document.body.appendChild(divObj);//在ul中添加标签//获取ul标签let uList = document.getElementById('uList');//添加li元素let liObj = document.createElement('li');//设置标签样式，当然也可以设置其他的属性值liObj.setAttribute('style','background:grey');//设置标签的文本信息liObj.innerText = 'Python';// 把js新建的li放到ul下uList.appendChild(liObj);}</script>
</head>
<body><div>下面是几个常用的编程语言</div><ul id="uList"><li>C</li><li>C++</li><li>Java</li></ul>
</body>
</html>

显示：

如何使用js添加html标签相关推荐

JS添加iframe标签
//添加iframe标签var body = document.getElementsByTagName("body");var div = document.createElem ...
使用js添加script标签
在开发中可能遇到需要使用到某个js里的方法,但是页面是后端返回的,不方便让后端添加js的时候(同一个页面的模版可能多个页面使用,只有一个页面需要引入js时,最好不要修改模版),可以通过js代码进行添加 ...
Asp.net 后台添加CSS、JS、Meta标签
下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.U ...
JS动态添加li标签
HTML代码 <div class="col-xs-12"><ul id="tabName" class="nav nav-tabs ...
JS从后台获取数据，前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
js动态添加meta标签
有时候我们需要动态添加meta标签和里面的内容,如何添加呢? 举例: // 手动添加mate标签const addMeta = (name, content) => {const meta = ...
html字符串img添加style,js 匹配 img标签增加 style样式
给img标签增加 style样式: 1.如果img 标签没有style 就先添加style标签 2.添加标签后统一再添加style样式 function imgTagAddStyle (htmlstr ...
js 添加内容实现列表功能
js 添加使用的是appendChild(node) - 插入新的子节点(元素) 来实现当然也可以删除使用appendChild(node) - 插入新的子节点(元素) 效果图代码如下 < ...
js阻止a标签默认事件的几种方法
方法/步骤疑问打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢? 方法一要阻止a标签跳转,可以改变href的值,直 ...

如何使用js添加html标签

文章目录

如何使用js添加html标签

如何使用js添加html标签相关推荐

最新文章

热门文章