快捷導(dǎo)航

js添加元素的簡單方式示例

更新時間：2023年10月12日 09:40:57 作者：Ther19

這篇文章主要給大家介紹了關(guān)于js添加元素的簡單方式,文中通過代碼示例將每種實現(xiàn)的方法都介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下

一、添加單個標簽元素

1.createElement()創(chuàng)建元素、appendChild()添加元素

var box=document.getElementsByClassName("box");
var div=document.createElement("div");
box.appendChild(div);

2.insertAdjacentElement()

var box = document.getElementsByClassName("box")
var div = document.createElement("div");
box.insertAdjacentElement("beforeend", div);

beforebegin：插在元素自身的前面
afterbegin：插在元素內(nèi)部最前面
beforeend：插在元素內(nèi)部最后面
afterend：插在元素自身的后面

二、添加多個標簽元素及內(nèi)容

1.insertAdjacentHTML()

var box=document.getElementsByClassName("box");
var div="<div>內(nèi)容<img></div>";
box.insertAdjacentHTML("beforeed",div);

beforebegin：插在元素自身的前面
afterbegin：插在元素內(nèi)部最前面
beforeend：插在元素內(nèi)部最后面
afterend：插在元素自身的后面

2.innerHTML

var box=document.getElemntsClassName("box");
box.innerHTML="<div>內(nèi)容<img></div>";

3.innerText和innerHTML區(qū)別

innerHTML可以輸出標簽以及內(nèi)容，innerText只能輸出內(nèi)容不能輸出標簽

補充：JS 追加元素的方法總結(jié)

方法一創(chuàng)建節(jié)點，追加

<body>
    <input type="text" placeholder="請輸入信息">
    <button class="one">添加</button>
    <button>刪除</button>
    <ul></ul>
</body>
</html>
<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    oBtn[0].onclick = function () {
        // 給父元素追加li
        if (oBinput.value != '') { //判斷文本不為空時追加
            let oLi = document.createElement('li') 
            oLi.innerHTML = oBinput.value
            oUl.appendChild(oLi)
            oBinput.value = ''
        }
    }
    </script>

方法二拼接字符串

<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    let str = ''
    oBtn[0].onclick = function () {
        str += `    <li>${oBinput.value}</li>
  `
        oBinput.value = ''
        oUl.innerHTML = str
             }
    </script>

方法三利用insertBefore

功能:按照指定位置添加子元素,將目標元素添加至參照元素之前

用法：父元素.insertBefore(目標元素,參照元素)

//body內(nèi)容同上
<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    oBtn[0].onclick = function () {
          if (oBinput.value != '') {
            let oLi = document.createElement('li')
            oLi.innerHTML = oBinput.value //賦值
            oUl.insertBefore(oLi, oUl.lastElementChild)
            oBinput.value = ''
        } 
        }
    </script>