网站内容添加(整理一下原生js添加及删除元素和内容的相关知识 )

　　网站内容添加(整理一下原生js添加及删除元素和内容的相关知识

)

　　整理关于在原生js中增删元素和内容的知识，供参考。

　　初始HTML代码：（一个小例子，点击按钮删除元素）

    我只是一个小元素，任人宰割。

刀是我拿的，人是我杀的

　　添加元素的容器。用于动态操作 DOM 的按钮。

　　初始js代码：

　　var container = document.getElementById("container");

var Element = document.getElementById("Element");

var btn = document.getElementById("btn");

btn.onclick = function () {

  Element.parentNode.removeChild(Element);

  console.log("删除成功！")

}

　　添加元素：在元素内添加内容：

　　文本内容innerText

　　container.innerText = '追加的内容';

　　HTML内容innerHTML

　　container.innerHTML = '追加内容为H3标签';

　　添加到原创内容：

　　以HTML为例：

　　container.innerHTML = container.innerHTML + '追加内容为H3标签';

　　您也可以使用 += 表示法：

　　container.innerHTML += '追加内容为H3标签';

　　创建要添加到页面的元素和内容：

　　创建元素createElement，创建内容createTextNode，添加元素appendChild

　　var text = document.createTextNode("这是一段文字");

var ele = document.createElement("h3");//创建一个html标签

ele.appendChild(text);//在标签内添加文字

container.appendChild(ele);//将标签添加到页面中

　　移除元素：

　　移除元素 removeChild

　　获取id删除：

　　var idObject = document.getElementById('sidebar');

if (idObject != null){

    idObject.parentNode.removeChild(idObject);

}

　　通过获取类删除：

<p>var paras = document.getElementsByClassName(&#x27;paginator&#x27;);

for(i=0;i