设置属性steAttribute
setAttribute()方法添加指定属性，并为其赋指定的值
setAttribute()是针对本身具有的属性来设置值
setAttribute()可以给任意元素加上自定义属性和值
第一个值设置属性名，第二个值设置属性值
<div></div>
<script>
//datasrc是自定义属性
let div = document.querySelector('div');
div.setAttribute('datasrc','123abc');//在HTML中给div添加内联元素 datasrc = "123abc"
</script>
练习
写两个选择按钮需求说明：当点击“我和狗狗一起活下去”按钮时，显示“我和狗狗一起活下去 ”加图片；当点击“灰霾来了怎么办”按钮时，显示“灰霾来了怎么办”加图片。显示的文字变成红色。效 果如下代码：
<p>
选择你喜欢的书：
<input type="radio" name="1" onclick="choose()" checked>我和狗狗一起活下去
<input type="radio" name="1" id="" onclick="choose()" >灰霾来了怎么办
</p>
<img src="" alt=""> <p></p>
<script>
let img = document.querySelector('img');
let p = document.getElementsByTagName('p')[1];
let img1 = 'img/dog.jpg';
let img2 = 'img/mai.jpg';
p.style.color = 'red';
function choose(){
if(document.getElementsByTagName('input')[0].checked){
img.setAttribute('src',img1);
p.innerHTML ='我和狗狗一起活下去';
}else{
img.setAttribute('src',img2);
p.innerHTML = '灰霾来了怎么办';
}
}
</script>
创建插入
1.document.createElement(标签名') 创建标签
2.document.createTextNode('标签内容') 创建的标签中插入内容
3.document.querySelector('body').appendChild('标签') 在body中插入内容
4.body.insertBefore(A,b)显示顺序
点击按钮创建一个div例如：
<button onclick="fn()">点我创建div</button>
<script>
function fn(){
let div1 = document.createElement('div');
let divText = document.createTextNode('我是div1');
div1.appendChild(divText);
let body = document.querySelector('body');
body.appendChild(div1);
}
</script>
insertBefore例子：
<script>
let h1 = document.createElement('h1');
let h1Text = document.createTextNode('我是h1');
h1.appendChild(h1Text);
let body = document.querySelector('body');
body.appendChild(h1);
let btn = document.createElement('button');
let btnText = document.createTextNode('我在h1前面');
btn.appendChild(btnText);
body.appendChild(btn);
body.insertBefore(btn,h1);//button在h1前面显示
</script>
克隆和删除
cloneNode(deep) 复制某个指定的节点
获取自己的元素 再插入到body中是不可以的
两种插入的实现方式 第一种创建新的节点去插入
第二种 clone出一个新的节点去插入
removeChild删除
h1点击后在它的上面克隆新的h1标签，然后创建一个按钮删除第一个h1，代码如下：
<h1 onclick="fn()" class="hh1">我是h1</h1>
<button onclick="fn1()">删除第一个</button>
<script>
function fn(){
let body = document.getElementsByTagName('body')[0];
let h1 = document.getElementsByClassName('hh1')[0];
let h1Clone = h1.cloneNode(true);
let hh1 = document.createElement('h1');
let h1Text = document.createTextNode('我是第二个h1');
hh1.appendChild(h1Text);
body.insertBefore(hh1,h1);
}
function fn1(){
let body = document.querySelector('body');
let h1 = document.getElementsByTagName('h1')[0];
body.removeChild(h1);
}
</script> -->
