DOM(innerHTML和className)

最新推荐文章于 2024-06-22 01:19:26 发布
最新推荐文章于 2024-06-22 01:19:26 发布
阅读量453 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36910110/article/details/78412142
版权

InnerHTML
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=”html”
功能：设置ele元素开始和结束标签之间的HTML内容为html

1、ele.innerHTML

<body>
<div class = "box" id = "box">
       元素
</div>
<ul id = "list">
    <li><i>前端开发</i></li>
    <li><b>服务器端开发</b></li>
    <li>UI设计</li>
</ul>
<script type="text/javascript">
   var lis =  document.getElementById("list").getElementsByTagName("li");
   for(var i = 0 , len = lis.length; i < len; i++) {
 console.log(lis[i].innerHTML);
 lis[i].innerHTML+="程序";
   }
</script>
</body>

效果如图：

2、className
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className=”cls”
功能：设置ele元素的class属性为cls

<<style type="text/css" media="screen">
    .current{
        background:#ccc;
        color:#f00;
    }
</style>

 <script type="text/javascript">
   var lis =  document.getElementById("list").getElementsByTagName("li");
  for(var i = 0 , len = lis.length; i < len; i++) {
  console.log(lis[i].innerHTML);
  lis[i].innerHTML+="程序";
  lis[1].className="current";
   }
</script>

元素里多了类

注意：className 是重新设计DOM元素的类，原来的类会被取消掉。
例如：

<style type="text/css" media="screen">
    .current{
        background:#ccc;
        color:#f00;
    }
</style>

<ul id = "list">
    <li><i>前端开发</i></li>
    <li class = "on"><b>服务器端开发</b></li>
    <li>UI设计</li>
</ul>

 lis[1].className="current";

此时on会被current替换掉。

LittleStrawberryGZR
关注
WEB基础之innerHTML添加标签后class触发js的问题
街角有人祝福,巷口有人哭~
06-22 1244
先说下事件绑定：可以了解一下比较新的jQuery版本中的的on方法，基本上可以取代之前习惯用的事件绑定的方法了。然后用下面这样的方法就可以给动态添加的dom绑定事件了，思路就是将新生成的元素类的事件委托给一开始就存在的父容器进行处理。假设动态插入的div类名是.child,他们的父容器id是#parent $("#parent").on('click','.child',function(){}
js基础 —— DOM
u010919331的博客
08-03 206
DOM对文本、节点、样式、属性的操作
JavaScript--innerHTML与className
海向的博客
12-03 1171
innerHTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ display: block; height: 60px;
JS属性操作2--innerHTML和className
weixin_40025586的博客
10-09 328
1.innerHTML的使用： css部分： &amp;lt;input type=&quot;button&quot; name=&quot;&quot; id=&quot;btn1&quot; value=&quot;点一下&quot;&amp;gt;&amp;lt;br&amp;gt; &amp;lt;div id=&quot;box&quot;&amp;gt;&am
使用innerHTML插入元素设置class不生效
larea的博客
03-05 830
在 js 中通过 .innerHTML 添加元素到页面中元素可以渲染到页面中，并且控制台中可以看到 class ，但样式不生效。
JS快速学习之 innerHTML className display
李昊轩的博客
07-03 526
innerHTML 属性用于获取或替换 HTML 元素的内容 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML</title> </head> <body> <h2 id="con">javascript</H2&
JavaScript实现获取dom中class的方法
12-09
在示例中，定义了一个名为`getClass`的函数，它接受两个参数：`node`代表要查询的DOM元素，`classname`是要找的类名。这个函数的目的是返回带有指定类名的所有子元素。 函数首先检查`node`对象是否支持`...
常用DOM整理
09-03
在Web开发中，JavaScript提供了操作文档对象模型（DOM）的一系列接口，允许开发者动态地修改网页内容、结构和样式。但由于浏览器之间的差异，开发者在使用DOM API时常常会遇到各种跨浏览器兼容性问题。本文对这些...
获取和操作 DOM 节点
最新发布
2401_82968855的博客
06-22 1939
获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：返回对拥有指定 id 的第一个对象的引用。element.getElementById 是指去 element 节点下根据 id 查找子节点。通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。实例演示预览复制。
遍历DOM对象内的元素属性示例代码
09-04
在DOM元素对象中，这些属性包括如`id`、`className`、`innerHTML`等标准属性，也可能包含自定义属性。以下是使用`for...in`循环遍历`objBtn`元素属性的代码： ```javascript function showBtn() { var tmp = ""; ...
html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性
weixin_32868705的博客
06-28 567
文本1//首先获取标签对象var p = document.getElementById("text1");//通过对象自带的style方法设置不同的样式p.style.backgroundColor = "black";p.style.fontSize = "20px";//上面是给p标签设置两个样式，背景颜色和字体大小说明：css样式中的属性带“-”的属性名，转换成驼峰格式使用2.innerH...
js document.write() ele.innerHTML document.createElement()动态创建标签
weixin_42448623的博客
05-18 902
文章目录动态创建标签的三种方式document.write()ele.innerHTMLocument.createElement()三总方式区别 动态创建标签的三种方式 document.write() // 创建一个div document.write("<div></div>") ele.innerHTML // 创建一个div ele.innerHTML = "<div></div>" ocument.createElement() // 创建一个
20. Element innerHTML 属性
enlyhua的专栏
08-06 790
定义和用法innerHTML 属性设置或返回元素的 inner HTML。 语法HTMLElementObject.innerHTML=text实例改变链接的文本、URL 和 target：<html> <head> <script> function changeLink() { document.getElementById('myAnchor').innerHTML="W3Scho
JS 三种添加元素的方式、区别（ write、createElement、innerHTML ）
Ares5k
08-03 1025
document.write, document.createElement, element.innerHTML 区别对比
innerHTML写入元素后添加方法
qizi_的博客
03-30 749
当需要动态插入元素时,插入的元素往往添加class样式于onclick方法失效. 这种情况是因为插入之前class与js代码已被读取 所以这里就解决方案原理是插入元素的同时给予它添加点击事件与内联样式 vessel.innerHTML = "<video style='width: 100%;height: 100%;background: #31313180;' class='camera-play'></video>"; document.querySelectorAll
关于innerHtml()插入的代码样式失效
qq8693的博客
01-25 5495
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; 最近公司要求研发一个手机适应的HTML页面，所以采用了BootStrap框架，页面很简单，就是根据用户输入的四个值，发送AJAX请求，去调用webservice接口得到json数据，把数据通过.innerHTML方法追加到id为neirong的div中，作为一个表格显示在下方，其中表格也是需要带class属性，带有Boo...
DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
『愚』的博客
11-16 4086
DOM对象中的常用属性innerHTML属性innerText属性className属性style属性 innerHTML属性 innerHTML属性：用于设置或获取HTML 元素中的内容。 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="o
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值