在insertAdjacentHTML之后更改className
在使用insertAdjacentHTML方法插入HTML元素后，可以通过更改className属性来修改插入元素的样式。
insertAdjacentHTML是DOM API中的一个方法，用于在指定元素的相对位置插入HTML代码。它接受两个参数，第一个参数是一个字符串，表示插入的位置，可以是"beforebegin"、"afterbegin"、"beforeend"或"afterend"；第二个参数是要插入的HTML代码。
更改className属性是通过操作元素的class属性来改变元素的样式。class属性是一个字符串，可以包含一个或多个类名，多个类名之间用空格分隔。通过更改className属性，可以添加、删除或替换元素的类名，从而改变元素的样式。
例如，假设有一个id为"myElement"的元素，我们可以使用insertAdjacentHTML方法在该元素之后插入一个新的div，并通过更改className属性来改变新插入div的样式：
var myElement = document.getElementById("myElement");
myElement.insertAdjacentHTML("afterend", "<div id='newDiv'>New Div</div>");
var newDiv = document.getElementById("newDiv");
newDiv.className = "newClass";在上述代码中，我们首先使用insertAdjacentHTML方法在myElement元素之后插入一个新的div，该div的id为"newDiv"，内容为"New Div"。然后，我们通过将newDiv的className属性设置为"newClass"，将新插入div的样式更改为"newClass"。
这样，我们就成功地在使用insertAdjacentHTML方法插入HTML元素后，通过更改className属性来改变插入元素的样式。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能开发平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
在insertAdjacentHTML之后更改className
javascript、html、css、insertadjacenthtml
我正在尝试在insertAdjacentHTML()函数之后更改我的className。为此，我使用了一个AJAX请求，路由/reviewcombine来自我的后端JavaScript代码。insertAdjacentHTML????????????????????head>
<div id="testListings"></
浏览 19提问于2020-02-14得票数 2
3回答
动态创建的按钮onclick不适用于react。
javascript、html、css、reactjs
我在javascript函数中动态创建一个按钮元素，然后向该按钮添加一个onclick事件。但是在我按下这个按钮后，我得到了一个错误Uncaught ReferenceError: removeQuestionis not defined (removeQuestionis是我的函数名) window.docum
浏览 13提问于2022-07-14得票数 0
回答已采纳
2回答
Javascript AddEventListener只触发一次
javascript、html、twitter-bootstrap
uname.value; if(un.length >= 2) { } undiv.className</em
浏览 5提问于2015-02-10得票数 1
回答已采纳
2回答
如何更改JavaScript中的最后一个文本节点子节点
javascript、jquery、html、css
NODE FOR THE CLICKED ELEMENT }问题: if (ClassName.className !' :
ClassName.insertAdjacentHTML('beforeEnd&#x
浏览 4提问于2015-12-07得票数 0
回答已采纳
3回答
将insertAdjacentHTML与React组件一起使用
javascript、reactjs、dom、css-grid
我正在尝试使用insertAdjacentHTML来填充网格容器中的一堆div，然后我可以使用这些div样式。但是，React向我抛出了一个错误"TypeError:无法读取属性'insertAdjacentHTML‘of null“export default function NewHabitgridContainer = document.querySelector('.grid-container');
浏览 2提问于2020-07-27得票数 0
回答已采纳
1回答
附加在特定索引document.querySelector上的javascript
javascript、dom
我正在尝试创建一个新元素并将其插入document.querySelector('.content')；在特定的索引中？下面是我的简单代码。document.createElement('p');var buttonOne = document.createElement('button'); var but
浏览 1提问于2022-03-11得票数 0
1回答
如何使用change addEventListener替换内容，而不是添加
javascript、replace、addeventlistener、onchange
嗨，我有一些代码，我在页面上插入一个跨度，每次对下拉项进行更改。我想要实现的是每次在下拉列表中进行更改时要更改/替换的跨度内的内容。但我现在得到的是每次都会创建一个新的跨度。doSomething.addEventListener('change', function() {
document.querySelector('.className').insertAdjacentHTML
浏览 17提问于2021-05-26得票数 1
回答已采纳
我的css是这样的： function showNoResults() { results.insertAdjacentHTML(
'
浏览 16提问于2019-05-02得票数 0
回答已采纳
1回答
“插入附加”和“`createElement`”
javascript、html、dom
如何保持对新创建元素(createElement())的引用，该元素是在DOM (insertAdjacentHTML())中的现有元素之后插入的。在本例中，如果我在elNew/elNewInner之后使用insertAdjacentHTML()，则可以看到颜色没有变化var elOrig = document.getElementById(elNewInner.textContent = 'I\'m a new element, b
浏览 2提问于2016-04-16得票数 3
回答已采纳
1回答
数组迭代过程中的addEventListener问题
javascript
如果用户选择要将该产品添加到他的“配置文件”中，则将每个产品推送到用户类构造函数中的一个空数组中，在用户类中，我有一个函数"displayProducts“，它基本上遍历该产品数组，创建一个div元素，在每次迭代中修改元素的innerHTML并显示在页面上。productSection.appendChild(div);问题是，当向每个按钮添加事件侦听器时-它只将事件侦听器应用到最后一个产品中，即使在每个阶段它都选择了正确的按钮
浏览 2提问于2020-10-29得票数 1
1回答
在insertAdjacentHTML之后按类名选择元素
javascript、html、css
const displayFirstQuestion = () => {`<div class="question-containerdocument.querySelector('.correct') // this is null以下是代码链接：
浏览 5提问于2021-01-17得票数 0
回答已采纳
2回答
如何在将自定义HTML插入为innerHTML时保留所有内容
javascript、dom
假设下面的示例： <Child className="container" />// or
div.insertAdjacentHTML('beforeend'当插入为innerHT
浏览 10提问于2022-09-25得票数 1
回答已采纳
1回答
使用React.js显示消息时出错
javascript、reactjs
我在尝试仅使用React.js提交表单后显示消息时遇到以下错误。错误：TodoList.addItem 28 | })> 30 | this.form.insertAdjacentH
浏览 3提问于2018-02-23得票数 0
2回答
如何使用React.js在列表中添加索引值？
reactjs、indexing
我需要使用React.js在我的数据列表中添加索引值。我的密码在下面。console.log('items',this.state); this.divRef.insertAdjacentHTMLObject.assign({}, el, {text: value}); }), }));
t
浏览 0提问于2018-03-27得票数 1
回答已采纳
1回答
是否将html(文本)附加到元素而不影响同级？
javascript、dom
在不使用appenChild和JQuery的情况下，有没有更简单的方法将smth添加到元素中？
浏览 8提问于2016-08-15得票数 2
回答已采纳
0回答
在insertAdjacentHTML之后选择相同的新元素
javascript
通过insertAdjacentHTML添加新元素后，我想选择该元素本身(<div id="two">two</div>)。我如何才能在不搜索DOM的情况下获得它？// <div id="one">one</div>d1.insertAdjacentHTML('beforeend'
浏览 6提问于2017-01-04得票数 3
回答已采纳
3回答
使用模板文字添加多个类名
javascript、html
"name":"name name-active"}></div> element.insertAdjacentHTML('beforeend', markup);
}; 结果为<
浏览 44提问于2019-10-10得票数 1
回答已采纳
2回答
将div替换为另一个html文件(‘jQuery /.html)的内容，代之以VanillaJS而不是jQuery
javascript、html、jquery、ecmascript-6
我希望能够编写以下内容，而不必导入jQuery库，以便将div替换为在另一个html文件中编写的组件的内容：<head>
<script src="https://code.jquery.com
浏览 2提问于2021-03-24得票数 1
回答已采纳
0回答
将外部HTML附加到react组件不起作用
javascript、reactjs、components
static propTypes = { };
return ( <h1 className={styles.header}>React Seed</h1>
浏览 0提问于2017-06-13得票数 0
回答已采纳
1回答
在承诺完成执行后，javascript设置诺言回调
javascript、asynchronous、promise
在下面的片段中，我试图在承诺完成后设置Promise回调。为什么会这样呢？ var thisPromiseCount = ++promiseCount;
log.insertAdjacentHTMLwith the ability to resolve or
// rej
浏览 3提问于2015-12-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
