JavaScript生成HTML新标签的三个方法

柔情只为你懂 2024-04-07 13:54 41阅读 0赞

此处以JS生成图片元素标签为例

<script>
         //HTML
         function a(){
        
             document.getElementById("d1").innerHTML="<img src='http://baidu.com/xx.jpg'>";
         }
         //方法
         function b(){
        
             var d1=document.getElementById("d1");
             // 这段代码创建了一个新的 <img /> 元素：
             var img = document.createElement("img");
             // 给新标签赋值属性
             img.src="http://baidu.com/xx.jpg";
             d1.appendChild(img);
         }
         //对象
         function c(){
        
             var c=new Image();
             c.src="http://baidu.com/xx.jpg";
             document.getElementById("d1").appendChild(c);
         }
     </script>

**HTML追加元素标签方法大全:**  
append(),在父级最后追加一个子元素(父子关系)  
appendTo(),将子元素追加到父级的最后(父子关系)  
prepend(),在父级最前面追加一个子元素(父子关系)  
prependTo(),将子元素追加到父级的最前面(父子关系)  
after(),在当前元素之后追加（是同级关系）  
before(),在当前元素之前追加（是同级关系）  
insertAfter(),将元素追加到指定对象的后面（是同级关系）  
insertBefore(),将元素追加到指定对象的前面（是同级关系）  
appendChild(),在节点的最后追加子元素(父子关系)

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML标签（三）

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

傷城~/ 2024年04月08日 13:17/ 0 赞/ 74 阅读

相关 JavaScript生成HTML新标签的三个方法

此处以JS生成图片元素标签为例 <script> //HTML function a(){

柔情只为你懂/ 2024年04月07日 13:54/ 0 赞/ 42 阅读

相关 JavaScript:HTML中的UI-＞标签

![4f93d1f9c7948683779c997e8ef31884.png][] 起始 -------------------- 没有UI,我们不如去当咸

墨蓝/ 2023年01月08日 08:22/ 0 赞/ 149 阅读

相关 JavaScript 控制 HTML 标签

几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。下拉列表的填充 _showSchools: funct

电玩女神/ 2022年11月17日 05:23/ 0 赞/ 204 阅读

相关三、 HTML表格标签

文章目录三、表格标签 3.1 表格的用途 3.2 表格标签 3.3 表格的常用属性 3.4 表格的跨行及跨列

蔚落/ 2022年11月12日 04:25/ 0 赞/ 255 阅读

相关 javascript html 去除,javascript去除html标签

javascript去除html标签 \[2021-02-02 21:47:18\] 简介: ![714766.html][] php去除nbsp的方法：首先创建一个P

╰+攻爆jí腚メ/ 2022年10月07日 13:49/ 0 赞/ 210 阅读

相关 html5新标签 aside,Html5新标签之aside标签详解

这节，我为大家介绍下：html5新标签之标签如何定义及如何使用aside呢？ aside这个标签用来定义网页布局的侧栏容器，就相当于：div定义样式然后担当侧栏容器。直接

柔光的暖阳◎/ 2022年10月07日 07:59/ 0 赞/ 344 阅读

相关 PHP删除HTMl标签的三种解决方法

PHP删除HTMl标签的三种解决方法本篇文章是对PHP删除HTMl标签的三种解决方法进行了详细的分析介绍，需要的朋友参考下方法1：直接取出想要取出的标记

喜欢ヅ旅行/ 2022年06月08日 08:08/ 0 赞/ 218 阅读

相关 html_标签三

1. 表格语法： <table> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>小明</td> <td>男</td

太过爱你忘了你带给我的痛/ 2022年05月25日 04:41/ 0 赞/ 178 阅读

相关 html5新标签总结

为了更好地处理今天的互联网应用，HTML5添加了很多新特性，例如：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好...

朱雀/ 2021年04月19日 14:57/ 0 赞/ 642 阅读