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");? //添加內容

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 的區別

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,設置屬性的值

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

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)}"]`);

//設置屬性值

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.訪問節點

document.getElementById(id);

返回對擁有指定id的第一個對象進行訪問

document.getElementsByName(name);

返回帶有指定名稱的節點集合

注意:Elements

document.getElementsByTagName(tagname);

返回帶有指定標簽名的對象集合

注意：Elements

document.getElementsByClassName(classname);

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

注意：Elements

2.生成節點

document.createElement(eName);

創建一個節點

document.createAttribute(attrName);

對某個節點創建屬性

document.createTextNode(text);

創建文本節點

3.添加節點

document.insertBefore(newNode,referenceChild);

在某個節點前插入節點

parentNode.appendChild(newNode);

給某個節點添加子節點

4.復制節點

cloneNode(true | false);

復制某個節點

參數：是否復制原節點的所有屬性

5.刪除節點

parentNode.removeChild(node)

刪除某個節點的子節點

node是要刪除的節點

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

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

6.修改文本節點

appendData(data);

將data加到文本節點后面

deleteData(start,length);

將從start處刪除length個字符

insertData(start,data)

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

replaceData(start,length,data)

在start處用data替換length個字符

splitData(offset)

在offset處分割文本節點

substringData(start,length)

從start處提取length個字符

7.屬性操作

getAttribute(name)

通過屬性名稱獲取某個節點屬性的值

setAttribute(name,value);

修改某個節點屬性的值

removeAttribute(name)

刪除某個屬性

8.查找節點

parentObj.firstChild

如果節點為已知節點的第一個子節點就可以使用這個方法。此方法可以遞歸進行使用

parentObj.firstChild.firstChild.....

parentObj.lastChild

獲得一個節點的最后一個節點，與firstChild一樣也可以進行遞歸使用

parentObj.lastChild.lastChild.....

parentObj.childNodes

獲得節點的所有子節點，然后通過循環和索引找到目標節點

9.獲取相鄰的節點

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

nerbourNode.nextSlbling: 獲取已知節點的下一個節點

10.獲取父節點

childNode.parentNode:得到已知節點的父節點

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。