div.insertAdjacentElement("beforeBegin", document.createElement("p")); //在div之前添加p元素

div.insertAdjacentElement("afterBegin", document.createElement("p")); //div所有子元素之前

div.insertAdjacentElement("beforeEnd", document.createElement("p")); //div所有子元素之后

div.insertAdjacentElement("afterEnd", document.createElement("p")); //div之后

div.insertAdjacentHTML("beforeBegin", "

3

4");? //添加內(nèi)容

div.insertAdjacentHTML("afterBegin", "

3

4");

div.insertAdjacentHTML("beforeEnd", "

3

4");

div.insertAdjacentHTML("afterEnd", "

3

4");

div.insertAdjacentText("beforeBegin", "the sky is mine");

div.insertAdjacentText("afterBegin", "the sky is mine");

div.insertAdjacentText("beforeEnd", "the sky is mine");

div.insertAdjacentText("afterEnd", "the sky is mine");

div.innerHTML = "

3

4";

div.innerText = "

3

4";//注意這兩個效果不一樣 這就是 text 和 html 的區(qū)別

div.appendChild(document.createElement("p")); //這個就等于上面第三個

div.insertBefore(document.createElement("p"),document.getElementsByTagName("p")[1]);//沒什么卵用

react 代碼參考

fun = (proxy) => {

const currentTargetDom = ReactDOM.findDOMNode(proxy.currentTarget);

if(!currentTargetDom){

return;

}

//在點擊元素之后添加兄弟元素li

currentTargetDom.insertAdjacentHTML('afterEnd','

123

')

};

react中原生js添加,移除class,設(shè)置屬性的值

//react中原生js添加,移除class,設(shè)置屬性的值

var deleteEle = document.querySelectorAll(`td[title="${this.formatDate(time)}"]`);

//刪除類名

deleteEle[0].classList.remove('ant-calendar-selected-end-date', 'ant-calendar-selected-start-date', 'ant-calendar-selected)

var ele = document.querySelectorAll(`td[title="${this.formatDate(time)}"]`);

//設(shè)置屬性值

ele[0].childNodes[0].setAttribute('aria-selected', true);

//添加類名

ele[0].classList.add('ant-calendar-selected-end-date', 'ant-calendar-selected-start-date', 'ant-calendar-selected-day')

a: 添加類名 currentTargetDom.nextSibling.classList.add('hidden')

b: 刪除類名 currentTargetDom.nextSibling.classList.remove('hidden')

1.訪問節(jié)點

document.getElementById(id);

返回對擁有指定id的第一個對象進(jìn)行訪問

document.getElementsByName(name);

返回帶有指定名稱的節(jié)點集合

注意:Elements

document.getElementsByTagName(tagname);

返回帶有指定標(biāo)簽名的對象集合

注意：Elements

document.getElementsByClassName(classname);

返回帶有指定class名稱的對象集合

注意：Elements

2.生成節(jié)點

document.createElement(eName);

創(chuàng)建一個節(jié)點

document.createAttribute(attrName);

對某個節(jié)點創(chuàng)建屬性

document.createTextNode(text);

創(chuàng)建文本節(jié)點

3.添加節(jié)點

document.insertBefore(newNode,referenceChild);

在某個節(jié)點前插入節(jié)點

parentNode.appendChild(newNode);

給某個節(jié)點添加子節(jié)點

4.復(fù)制節(jié)點

cloneNode(true | false);

復(fù)制某個節(jié)點

參數(shù)：是否復(fù)制原節(jié)點的所有屬性

5.刪除節(jié)點

parentNode.removeChild(node)

刪除某個節(jié)點的子節(jié)點

node是要刪除的節(jié)點

注意：IE會忽略節(jié)點間生成的空白文本節(jié)點(例如，換行符號)，而Mozilla不會這樣做。在刪除指定節(jié)點的時候不會出錯，但是如果要刪除最后一個子結(jié)點或者是第一個子結(jié)點的時候，就會出現(xiàn)問題。這時候，就需要用一個函數(shù)來判斷首個子結(jié)點的節(jié)點類型。

元素節(jié)點的節(jié)點類型是 1，因此如果首個子節(jié)點不是一個元素節(jié)點，它就會移至下一個節(jié)點，然后繼續(xù)檢查此節(jié)點是否為元素節(jié)點。整個過程會一直持續(xù)到首個元素子節(jié)點被找到為止。通過這個方法，我們就可以在 Internet Explorer 和 Mozilla 得到正確的方法。

6.修改文本節(jié)點

appendData(data);

將data加到文本節(jié)點后面

deleteData(start,length);

將從start處刪除length個字符

insertData(start,data)

在start處插入字符,start的開始值是0;

replaceData(start,length,data)

在start處用data替換length個字符

splitData(offset)

在offset處分割文本節(jié)點

substringData(start,length)

從start處提取length個字符

7.屬性操作

getAttribute(name)

通過屬性名稱獲取某個節(jié)點屬性的值

setAttribute(name,value);

修改某個節(jié)點屬性的值

removeAttribute(name)

刪除某個屬性

8.查找節(jié)點

parentObj.firstChild

如果節(jié)點為已知節(jié)點的第一個子節(jié)點就可以使用這個方法。此方法可以遞歸進(jìn)行使用

parentObj.firstChild.firstChild.....

parentObj.lastChild

獲得一個節(jié)點的最后一個節(jié)點，與firstChild一樣也可以進(jìn)行遞歸使用

parentObj.lastChild.lastChild.....

parentObj.childNodes

獲得節(jié)點的所有子節(jié)點，然后通過循環(huán)和索引找到目標(biāo)節(jié)點

9.獲取相鄰的節(jié)點

neborNode.previousSibling :獲取已知節(jié)點的相鄰的上一個節(jié)點

nerbourNode.nextSlbling: 獲取已知節(jié)點的下一個節(jié)點

10.獲取父節(jié)點

childNode.parentNode:得到已知節(jié)點的父節(jié)點

總結(jié)

以上是生活随笔為你收集整理的原生js追加html代码,原生js动态添加元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。