如何使用js添加html标签

最新推荐文章于 2024-02-22 19:19:24 发布
最新推荐文章于 2024-02-22 19:19:24 发布
阅读量2.1w 收藏 45
点赞数 9
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44741023/article/details/117434364
版权

文章目录

如何使用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>

显示：
在这里插入图片描述

Keeling1720
关注
  • 9
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将Js的脚本加入HTML网页的方法
m0_61816929的博客
02-25 1万+
1.行内式 直接在HTML标签内写符合js标准的语句，作为标签的事件属性的属性值。 最好使用在功能简单，使用次数少的情况。 简单，方便，明了，一目了然。 例如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-c.
php 向html追加元素,如何动态生成html元素以及为元素追加属性的方法介绍（附代码）...
weixin_36154762的博客
04-01 681
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码)，内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。动态生成HTML元素的方法有三种：第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点var link = document.createElement('a');link.setA...
js 动态插入html元素
02-24
js 动态插入html元素 haha 还要大于20字
用JS向页面插入标签
m0_54606980的博客
10-30 3285
/3.把标签div写入body中。//4.把标签div写入body中。//js在body中插入标签。//1.获取要插入的目的标签。//js在div中添加标签。//2.向标签中添加内容。//3.向标签中添加内容。//1.创建div标签。
JavaScript生成HTML新标签的三个方法
My note
09-07 2564
insertBefore(),将元素追加到指定对象的前面（是同级关系）insertAfter(),将元素追加到指定对象的后面（是同级关系）prependTo(),将子元素追加到父级的最前面(父子关系)appendChild(),在节点的最后追加子元素(父子关系)appendTo(),将子元素追加到父级的最后(父子关系)prepend(),在父级最前面追加一个子元素(父子关系)append(),在父级最后追加一个子元素(父子关系)before(),在当前元素之前追加（是同级关系）
用js添加html
weixin_41969959的博客
04-14 6570
<div class="" onclick="AddSignRow()">用js添加html</div> <div id="SignFrame"></div> <script> function AddSignRow(){ //var num='1'; var sb='<ul>'; sb+='<li>'; sb+='<d...
原生js插入HTML元素
lplovewjm的博客
08-22 2543
方法，格式如下：根据id、className等找到这个元素，如果这个元素的id为a，2.afterbegin：在 element 元素的第一个子节点前面;3.beforeend：在 element 元素的最后一个子节点后面;1.beforebegin：在 element 元素的前面;4.afterend：在 element 元素的后面。如果需要多次判断插入，并且删除之前插入的元素，则可以用。比如我们想放在element元素后面，就可以这么写，
js操作并且添加html标签操作
加金开发
02-14 980
var V_menu_id=document.getElementById("menu");//获得定位标签添加的位置在哪里 var br=document.createElement(AA);//创建要添加的对象 br.innerHTML="<b id="+menu_list+i+" style="+"margin-top:10px"+"+>"+txt[i].name+"&lt...
HTML页面中添加Canvas标签示例
09-28
通过了解和掌握如何在HTML中添加Canvas标签，以及如何使用JavaScript操作Canvas，开发者可以创建出更加丰富和互动的网页应用。同时，确保考虑到旧浏览器的兼容性问题，合理地处理Canvas不被支持的情况。
HTML5 audio标签使用js进行播放控制实例
09-28
本文将深入探讨如何使用JavaScript（JS）来对HTML5的标签进行播放控制。 首先，我们需要创建或获取标签。在提供的代码中，使用`document.getElementById('audio')`来获取id为'audio'的音频元素。这允许我们在...
点击创建添加标签插件Layer.js
06-24
"点击创建添加标签插件Layer.js" 是一个专为这个目的设计的工具，它利用jQuery这一广泛使用的JavaScript库来提供高效且用户友好的标签操作功能。本文将深入探讨这款插件的工作原理、核心功能以及如何在项目中集成和...
javascript的document中的动态添加标签实现方法
10-21
在今天的探讨中，我们将深入了解JavaScript中document对象的高级操作，包括动态创建、修改和删除HTML标签的技术。这些操作对于开发动态网页内容至关重要，允许我们根据用户的操作或程序逻辑来更新页面结构。下面，将...
用js-插入HTML元素
最新发布
IKUNzhenin的博客
02-22 914
3. 使用`document.getElementsByTagName('ol')[0]`获取了所有的``元素，并取得第一个元素赋值给`ol`变量。4. 使用`document.getElementsByTagName('li')`获取了所有的``元素，并将其赋值给`li`变量。- 使用`ol.innerHTML+=`追加了一个包含文本"追加目录4"的``元素到`ol`元素中。5. 使用`console.log(li)`将`li`变量输出到控制台，用于验证获取到的元素是否正确。
js在html追加
qq_34631220的博客
06-01 983
js在html追加
怎么在HTML页面中使用js取DOM给html页面中添加标签
qq_42877027的博客
02-22 270
怎么在HTML页面中使用js给html页面中添加标签
怎么用JS输入HTML代码
xiaoweids的博客
09-17 3111
document.write("需要输出的内容")
JavaScript面向对象动态添加标签页 （ES6）
周百万的博客
09-17 1749
1、主要功能介绍： 将不同的功能抽离出来 1、 创建对象具有切换选项卡的功能 2、 创建对象具有添加选项卡的功能 3、 创建对象具有删除选项卡的功能 4、 创建对象具有修改选项卡内容的功能 5、动态获取、绑定元素、渲染UI界面
JavaScript应该放置到html中的什么位置
学而不思则罔
07-04 1058
Head里的JavaScript 在head部分的脚本在被调用的时候才会执行 Body里的JavaScript 放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行 添加外部JavaScript脚本 也可以像添加外部CSS一样添加外部JavaScript脚本文件，其后缀通常为.js 注意：脚本文件里头不能再含有标签。 注：
前端js创建标签和插入标签
个人笔记
03-19 7336
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"></div> <div class="root"></div> </body> </html> <script
html js 添加父标签
05-26
你可以使用 JavaScript 操作 DOM 来添加父标签。 首先，你需要选中要添加父标签的 HTML 元素。你可以使用 `document.querySelector()` 或 `document.querySelectorAll()` 方法选中元素。例如，如果你想要为一个 `<div>` 元素添加父标签，你可以这样写： ```js const divElement = document.querySelector('div'); ``` 接下来，你可以使用 `document.createElement()` 方法创建一个新的父标签元素，例如 `<section>` 元素： ```js const sectionElement = document.createElement('section'); ``` 然后，你可以使用 `Element.appendChild()` 方法将要添加的元素添加到父标签中： ```js sectionElement.appendChild(divElement); ``` 最后，你需要使用 `Element.replaceWith()` 方法将原来的元素替换为新的父标签元素： ```js divElement.replaceWith(sectionElement); ``` 完整的代码片段如下： ```js const divElement = document.querySelector('div'); const sectionElement = document.createElement('section'); sectionElement.appendChild(divElement); divElement.replaceWith(sectionElement); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值