JavaScript-替换元素

lt;div class="fuClass"><h4 id="Title">jiajia</h4></div>

//创建新的元素

const newTitle=document.createElement('h1');

//添加id

newTitle.id="newTitle";

//内容

// newTitle.innerText="测试标题";

newTitle.appendChild(document.createTextNode('任务标题'));

//找到被替换的标签

const oldTitle=document.getElementById('Title');

//获取父级

const fuClass=document.querySelector('.fuClass');

//替换

fuClass.replaceChild(newTitle,oldTitle);

console.log(oldTitle);

lt;div class="aa">aa</div>

<div class="fuClass"><h4 id="Title">jiajia</h4></div>

<ul>

</ul>

const lis=document.querySelectorAll("li");

const list=document.querySelector("ul");

//第一种删除方法

//lis[0].remove();

//第二种删除方法

//list.removeChild(lis[1]);

//class && attr

const firstLi=document.querySelector("li:first-child");

const link=firstLi.children[0];

//a 类

let val;

val=link.className;

val=link.classList;

// val=link.classList[0];

link.classList.add('test');

link.classList.remove('test');

//a 属性

val=link.getAttribute('href');

val=link.setAttribute('href','http://www.baidu.com');

link.setAttribute('title','百度');

link.removeAttribute('title');

val=link.hasAttribute('title');

console.log(val)

Query修改CSS伪元素属性的方法

CSS伪元素(pseudo elements)不是DOM元素, 因此你无法直接选择到它们。

假设有如下HTML代码：

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代码：

.techbrood:before {
  width: 0;
}

现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%,

有两个方法, 一个是添加新的样式：

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(注意该方法将影响所有的class为techbrood的元素)

另外一个方法是为该元素添加新类, 并通过设置新类的属性来达到改变伪元素属性的效果：

.techbrood.change:before{
  width: 100%;
}

jQuery代码：

$('#td_pseudo').addClass("change");

在线咨询

上一篇：不得不佩服，美观小巧的网页内容编辑器-ContentTools
下一篇：前端入门！不容错过！HTML基本标签知识大盘点

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript-替换元素

您的项目需求