JavaScript Dom添加标签

1.创建标签
let newDiv = documnet.createElement(“div”);
newDiv.innerHTML=“你好世界”；//添加标签内容
newDiv.className=“mydiv”;
newDiv.id=“myid”;
2.把新标签放入页面中
方法一：
let body =document.getElemmentsByTagName(“body”);
方法二：
let body = document.body;
body.appendChild(newDiv);

把新标签插入到某标签之前：
某标签.parentNode.insertBefore(newDiv,某标签)；
把新标签插入到某标签之后：
某标签.nextSibling.parentNode.insertBefore(newDiv,某标签)；

Dom删除标签
父标签.removeChild(目标);
目标.parentNode.removeChild(目标)；

事件机制（Event）
onclick =“this.innerHTML=‘hello world’;”
onclick on当…时 click 点击
onclick=“JS代码”；
this “这个” onclick事件里特指事件所处的标签

1.找标签
ID、TagName、子父兄弟事件中：onclick this指代事件所在的标签
2.获取、更改内容
xx.innerHTML
3.获取、更改属性
xx.id xxx.className
4.更改样式
例：xx.style.属性=“属性值” xx.style.background=""; xx.style.fontsize=“20px”; xx.className 更改类名
所有的属性值，js都是字符串
事件监听：addEventListener
element.addEventListener(Event,function())
字符串转为整型 parseInt(值)。

例题：

Title

你好，世界2

你好，世界3

你好，世界4

js：方法二： let changeDiv = function( tag ){ console.info(tag); tag.innerHTML='hello world'; tag.style.background='#00f'; };

// 方法三：比较推荐
{
let box3 = document.getElementById(“box3”);
box3.onclick = function(){
this.innerHTML=‘hello world’;
this.style.background=’#00f’;
};
}
// 方法四：极力推荐的方式
{
let box4 = document.getElementById(“box4”);
box4.addEventListener(“click”,function(){
this.innerHTML=‘hello world’;
this.style.background=’#00f’;
});
box4.addEventListener(“click”,function(){
console.info( this );
});
}

在网页中添加广告：
{
let ggDiv = document.createElement(“div”);
let closeSpan = document.createElement(“span”);
let ggNr = document.createElement(“div”);

ggDiv.className = "adv";
closeSpan.innerHTML = "关闭";
ggNr.className = "adv_content";
ggNr.innerHTML = '<a href="http://www.baidu.com">百度链接</a>';

document.body.appendChild(ggDiv);
ggDiv.appendChild( closeSpan );
ggDiv.appendChild( ggNr );

closeSpan.addEventListener("click" , function(){
     ggDiv.parentNode.removeChild( ggDiv );
});

}

在控制器输出所点选项的内容和当前的this：

Title

ul#box>li{item $}*5
<ul id="box">
    <li>item 0</li>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

<script src="js/5.js"></script>

js： { let box = document.getElementById("box"); let lis = box.children; // for( let i = 0 ; i <= lis.length-1 ; i++){ // lis[i].addEventListener("click",function(){ // console.info( i ); // console.info( this.innerHTML ); // }); // } let i = 0; for( i = 0 ; i <= lis.length-1 ; i++){ lis[i].index = i ; // 存储索引 lis[i].addEventListener("click",function(){ console.info( this.innerHTML ); console.info( this.index ); }); } }

JavaScript Dom添加标签

猜你喜欢