js动态创建div，赋值className;在另一个js页面不起作用

最新推荐文章于 2025-07-18 15:33:49 发布

原创最新推荐文章于 2025-07-18 15:33:49 发布 · 945 阅读

0 ·

CC 4.0 BY-SA版权

个人学习中记录遇到的错误专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在JavaScript中动态添加CSS及onclick事件的问题。当改变JS引用顺序导致功能失效时，作者采取了将CSS直接嵌入JS文件的临时解决方案，并详细介绍了如何使用JS动态为元素添加onclick事件。

引用js的顺序改了之后还是不起作用，css也不起作用。用笨方法解决：在当前js里面加CSS。

js动态添加onclick方法添加方式是：

var button = document.createElement("input")

button.setAttribute("type","button")

button.onclick=function(){【这里写点击的方法】}

一定要加function否则不报错也不起作用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT6680

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript动态创建DIV元素的方法

CgbAutoit的博客

10-02

1074

其中，动态创建DIV元素是一种常见的需求。本文将介绍如何使用JavaScript动态创建DIV元素，并提供相应的源代码示例。是一个占位符，表示您需要将DIV元素添加到文档中的某个具体容器。以上代码演示了如何动态创建一个DIV元素，并将其添加到文档中的某个位置。方法可以动态创建DIV元素，并通过设置元素的属性和内容来自定义它的外观和功能。的属性来修改DIV元素的各种属性。获取到文档中的某个容器元素，并将新创建的DIV元素。方法将新创建的DIV元素插入到文档中的特定位置。来设置DIV元素的ID属性，通过。

html综述一 -- jQuery基础使用（动态在body中创建div节点）

weixin_33904756的博客

04-11

2702

1 动态创建节点1-1 通过jsp最原生的方法来创建节点详细说明请查看点击此处查看<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <title>这是使用jqu...

参与评论您还未登录，请先登录后发表或查看评论

HTML ＜div＞元素详细应用

wnw1234的博客

03-27

936

HTML <div> 元素是什么? 是块级元素，它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。全局属性 1.class 属性规定元素的类名（classname）。 container类用于固定宽度并支持响应式布局的容器 container-fluid类用于100%宽度,占据全部视口(viewport)的容器 2.style 属性规

关于用append()插入代码后对应的js无效问题完美解决

fakergoing的博客

09-10

8403

1.下面的会有用到find，find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。 2. 产生这种问题的原因是：是因为append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件没有生效。例子我们要把下面这段代码用append添加到div里面（这是要添加div里面的） &l...

利用js更改类名（className）来更改样式不起作用

Yss915的博客

07-08

3063

原因可能是更改的类名优先级不够可以在css中将相应类名前加上父类名来提升类名的优先级，例如 .xb li{ float: left; margin-right: 10px; border: 10px solid rgb(104, 102, 102); border-radius: 50%; } .xb .yes{ border-color: brown; } .xb .no{ border-color: rgb(104, 102, 102); } xb即为父类名

vue通过js来设置div的最小高度所出现的赋值失败问题。

weixin_44220680的博客

07-03

3403

最近敲代码遇到一个小问题，如图：当页面内容不够多时，会出现底部栏上移的问题。一开始我想到的解决方式时，获取到屏幕的高度，并将它赋值为中间的div之中，这就能完美解决footer下移的问题了，说干就干。当时写出的代码是这样的： mounted(){ console.log('进行了高度赋值'); console.log($(document).height()/1.7); ...

h5 怎么在js脚本中动态创建div元素

07-13

下面是一个示例代码，演示了如何在JavaScript中动态创建 `<div>` 元素： ```html // 创建一个新的 <div> 元素 var div = document.createElement("div"); // 设置 <div> 元素的属性，比如 id、class、style ...

84、动态创建和操作HTML元素：JavaScript基础教程

最新发布

Pepper的专栏

07-18

本博客详细介绍了如何使用JavaScript动态创建和操作HTML元素，包括创建元素、设置属性和样式、添加事件监听器、批量操作多个元素、添加和移除元素，以及动态创建表单元素等内容。通过这些技术，开发者可以增强网页的交互性和动态效果，提升用户体验。

vue项目中在可编辑div光标位置插入内容的实现代码

10-15

在这里，我们创建一个新的输入元素，将其插入到光标位置，然后删除这个输入元素，以防止其出现在页面上。 ```javascript dropRelease(event, nodeValueName) { event.preventDefault(); let textNode = ...

JS动态添加样式类名

Adios_0403的博客

07-19

2515

/ 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除。// 2 contains() 有就返回 ture，没有就返回 false。// 2. 切换类 toggle() 有还是没有有就删掉，没有就加上。// 2. 删除类 remove() 类名不加点，并且是字符串。// 2 追加类 add() 类名不加点，并且是字符串。// 通过 classList 添加。// 通过 classList 添加。// 通过 classList 添加。// 1. 获取元素。

关于在一个页面的div嵌套另一个页面导致下拉框失效的问题

浓眉大脸哥的博客

01-30

1505

做后台管理页面，在一个主页面中嵌套另一个页面，通过主页面点击不同菜单，在页面另一部分显示不同的子页面，知道有两种方法： 1.使用窗口; 2.在主页面的div里面嵌套一个子页面，$("#divId").load("XXX.jsp"). 在用第二个方法时，出现一个问题，当子页面加载成功后，会使得主页面的下拉菜单失效，一个解决方法是：主页面和子页面都包含了一次bootstrap.min.js文件，

javascript中动态生成div无效解决方法

大师的资源

04-14

4565

因为打印控件的需要用Javascript生成一些DIV层。我用下面代码： var div = document.createElement("div"); div.ID="right"; document.body.appendChild(div); document.getElementById("right").innerText = strContent; // 为什么这个不行？

div下js失效的问题

dylanwang_cn的博客

08-01

812

测试修改项目的时候js突然失效，方法能进去但是不会执行方法内的jQuery代码最开始是使用的,后来换成的，如下此代码运行一段时间没问题，后来在修改图片缩小放大的功能时，上面的代码就罢工了，两者没有什么关系，只是相邻的两个div，搜了很多方法没解决掉，后来换成下面的标签就可以了还有就是注意js的引用顺序，顺序

javascript生成div标签并设置class和style

jianchenn的博客

07-13

9711

整体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box { border: 1px solid #f2f2f2; width: 100px; height: 100px; margin-left: 15px; margin-top: 15px;

css里的.className div {}

normallife的专栏

06-26

1513

css里的.className div {}的意思是：用了className的div及其子div都要按照这个className里定义的内容来显示。比如，css 文件里： .padZero div { top-paddeing:0px; } 它的意思就是用了padZero这个class css的div及其子div都应该遵守top-padding:0px; margi

通过类名修改样式 className操作Css，className获取，div.className = ‘box‘，div.className = ‘nav box‘

weixin_54048131的博客

05-27

332

通过操作类名className操作css 1、 2、元素.className = 'active' 3、 4、div.className = 'box' 5、className可以通过className去代替 6、既有nav 又有box的写法 7、缺点是直接使用className赋值会覆盖以前的类名 8、

js添加class绑定事件无效的解决办法

Timor的博客

08-06

1717

当页面加载时，就会注册所有的事件，后面通过jquery新增的内容（< div class=“item”></ div>），再对新增的添加事件$(".item").click(function(){})；页面是不会执行的，解决方法，使用live(), live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）: $(".item").live("click",function(){ }); 由于jquery1.9后的版本已经把live()方法删

（14）问卷调查：两种方式className、div样式属性值改变、单选按钮性格测试

FixedStar 的博客

08-08

806

如题